Deactivate responsiveness of st.columns

Hi, I’m using st.columns on st.form.

In mine desktop the widgets align. But in the mobile version not.

I did some tests here and discovered that in the mobile version the app don’t create the columns. Here are the app link and the app repo

Desktop version:

Mobile version:

The code:

import streamlit as st
with st.form("Test"):
    col1, col2, col3 = st.columns(3)
    with col1:
        st.write("col1")
        st.form_submit_button("Button 1")
    with col2:
        st.write("col2")
        st.form_submit_button("Button 2")
    with col3:
        st.write("col3")
        st.form_submit_button("Button 3")

Accept sugestions to solve this bug, maybe using css or markdown.

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you’d like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[LukasMasuch]

@wizzioficial Thanks for reporting this! st.columns are built to be responsive, meaning that it will switch to rendering the columns underneath each other at a certain display size. So, this is more of an enhancement request to add some capabilities to deactivate the responsiveness of columns.

[sfc-gh-kbregula]

As workaround, you can use CSS style:

st.write('''<style>

[data-testid="column"] {
    width: calc(33.3333% - 1rem) !important;
    flex: 1 1 calc(33.3333% - 1rem) !important;
    min-width: calc(33% - 1rem) !important;
}
</style>''', unsafe_allow_html=True)