Changes in "st.column" placement according to screen size

Using Streamlit
1

Hi, I made a column using “st.columns” to put several “st.button” horizontally, and put “st.button” inside. But because of the reactive type, if it’s smaller than 640px, the column changes vertically, not horizontally. Can we make sure that the buttons don’t change when the screen becomes smaller?

1 Like
2

Hi @dskang207,

Check out this library (https://nicedouble-streamlitantdcomponentsdemo-app-middmy.streamlit.app/)
The options you can choose can be either Buttons or Segmented.
These buttons can be sized and left justified so that they fit both your screen types.

Cheers

1 Like
3

Thank you. Your response was very helpful to me. But when the screen gets smaller, the buttons fill up from the left side. Is it possible to fill up from the right side? Also, Is it possible to make all the buttons disappear once the button is pressed?

4

I tried to apply css using “st.markdown()” but I couldn’t access it with “class” name.

5

Hi,
To access your CSS via class name, in your CSS you can specify your CSS element name to start with .

<style>
.hello {
  background-color: yellow;
}
</style>

Then you can use it in your HTML code via st.markdown() as follows:

st.markdown("""
   <p class="hello">Hello world!</p>
""", unsafe_allow_html=True)
6

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