How to move elements to other positions

Using Streamlit
, ,
1

Hi! I was wondering if there is a way to move the elements to other positions. I know we can use the custom CSS to move them, But is there any other way to move the elements.

2

Hello @Vedant! :wave:

In Streamlit, one way to move elements horizontally and vertically is by adjusting the layout with st.columns for horizontal positioning and using empty st.write() statements for vertical spacing.

Moving elements horizontally using st.columns:

You can control the width of each column by specifying a ratio list. For example:

import streamlit as st

# Creating columns with custom width ratios
col1, col2, col3 = st.columns([1, 2, 3])

# Adding elements to the first column
with col1:
    st.write("Column 1")
    st.write("Content A")

# Adding elements to the second column
with col2:
    st.write("Column 2")
    st.write("Content B")

# Adding elements to the third column
with col3:
    st.write("Column 3")
    st.write("Content C")

In this example, the columns have a relative width ratio of 1:2:3 . This means that the second column (col2 ) will be twice the width of the first (col1 ), and the third column (col3 ) will be three times the width of the first.

Moving elements vertically using empty st.write() statements:

You can add vertical spacing by inserting empty st.write() calls or empty headers.

Example:

import streamlit as st

# Adding the first element
st.write("First Element")

# Adding vertical space
st.write("") 

# Adding the second element
st.write("Second Element")

I hope that helps! :slight_smile:

Best,
Charly

1 Like
3

Hello @Charly_Wargnier Thanks for the reply but somehow I figured it out by using the streamlit_extras package and it looks really great in the below picture. But can you help me with something else in the below image. I want to make the headers sticky in there respective columns when the columns are scrolled. Can you help me with it.

image
image2560×1422 204 KB

4

Wow! That looks nice!!

Which extras module are you using?

Charly

5

@Charly_Wargnier I am using the grid module from the streamlit_extras package.

https://arnaudmiribel.github.io/streamlit-extras/extras/grid/

1 Like
6

Ah, yes! Great one – I should have thought of that! :smiling_face:

Glad you found a workaround that fits your needs.

Best,
Charly

7

Thanks for sharing these insights mate as I found it very much useful and informative.

2 Likes
8

I actually wanted to ask if there is something I can do to fix the header positions in there respective columns. Can anyone help me doing that? @Charly_Wargnier @tysonzach

9

@tysonzach Thanks for the kind words! :smiling_face_with_three_hearts:

@Vedant What do you mean by ‘fix the header positions’?

10

@Charly_Wargnier As in the above image you can see that when I scroll and of the scrollable elements the text written at the top (which is a header element). scrolls with it. But I want to stick that header on the top of each of there respective columns.

11

You should be able to create 2 static headers on 2 columns of equal size before the chat elements – as follows:

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    st.markdown("## Header 1")

with col2:
    st.markdown("## Header 2")

Would that work?

Best,
Charly

12

image
image2224×1266 208 KB

@Charly_Wargnier You see in the above image the text written (ABC) is still scrollable. So can me make them stick to that top when a respective column is being scrolled?

13

Wouldn’t this work?

Best,
Charly

14

@Charly_Wargnier in the above image (with header ABC) i tried doing with the code you gave me for the static headers but it seems like they are still getting scrolled.

16

Put the messages inside scrollable containers.

import streamlit as st

cols = st.columns(2)
for n, col in enumerate(cols):
    with col:
        st.header(f"Column #{n}")
        container = st.container(height=300)
    with container:
        for i in range(100):
            st.text(f"Message #{i}")
17

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.