How to ajust or control of width and height of every columns in st.beta_columns component?

🎈 Using Streamlit
1

in wide mode, if we set 2 columns, two columns will be filled the screen width.
we want to control the width of every column, like 30% width of screen width.
is there have some paras to make it come true.
thanks a lot.

2

Hi @BeyondMyself,

st.beta_columns takes an int or a list of numbers.

If you enter a list of number:

Creates a column for each number, and each column’s width is proportional to the number provided. Numbers can be ints or floats, but they must be positive.
For example, st.beta_columns([3, 1, 2]) creates 3 columns where the first column is 3 times the width of the second, and the last column is 2 times that width.

so in your case you could make 4 columns, where the middle two are 30% of the width and can be used for the contents of your app. The 2 on the sides are left empty for layout purposes.

empty_left, contents_left, contents_right, empty_right = st.beta_columns([1, 1.5, 1.5, 1])

2 Likes
3

Thank you very much, this way works.
A complete code can be like this:

import streamlit as st
empty1,content1,empty2,content2,empty3=st.beta_columns([0.3,1.2,0.3,1.2,0.3])
with empty1:
        st.empty()
with content1:
        st.write("here is the first column of content.")
with empty2:
        st.empty()
with content2:
        st.write("here is the second column of content.")
with empty3:
        st.empty()

users can replace st.write() with input or select box or image.

1 Like