St.Columns Responsive Behavior

Markus3 · December 8, 2024, 11:34am

Hi,

I try to re-create the responsive st.columns example from the blog:

(scroll to the gif right after the text “yes, columns are beautiful across devices”)

But I am not able to create the same behavior that is shown there. For me, the Columns never change the number of elements displayed in one line, besides on a very narrow screen.

In the example, the columns dynamically adjust to different screen-sizes and change the number of items that are put into one ‘line’.

How to achieve this?

mathcatsand · December 8, 2024, 6:03pm

I wasn’t even aware that Streamlit used to have that flex behavior. All of the recent versions of Streamlit I’m familiar with only have two modes: All columns in a row, or fully stacked. That blog post is prior to the release of Streamlit 1.0.0. It looks like the behavior might have changed in version 0.86.0: 2021 release notes - Streamlit Docs

Here are a couple related feature requests that you might want to upvote:

github.com/streamlit/streamlit

Wrap columns/grids on different screen sizes

opened 10:17PM - 14 Sep 22 UTC

quantoid

type:enhancement feature:st.columns

### Problem Our Streamlit dashboard has users with different width screens, som…e 4K others not. If we put everything in one column it gets very long, and for 4K users there's tons of wasted empty space either side. If we use full width with columns it's much better for 4K users, but other users get things squished into narrow side-by-side columns. ### Solution What we need is basically the [flex-wrap](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-wrap) option provided by CSS flexboxes, where items are laid out in a row if there's room, but they wrap to give a column on smaller screens. An implementation of this might be an option passed to `st.column` that tells it to wrap on smaller screens to maintain a minimum pixel width per column. Or perhaps a new function `st.grid` that arranges things in a grid of boxes where the rows and columns adjust to suit the user's screen. --- 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.**

github.com/streamlit/streamlit

Configurable column responsiveness width threshold

opened 01:52AM - 28 Apr 23 UTC

quantoid

type:enhancement feature:st.columns

### Problem We are using wide layout with multiple columns, and finding that …our dashboard is not responsive enough on smaller screens, e.g. when moving window to laptop monitor from 4K external monitor. The columns stay in a horizontal row even when their content is very squished up, and only flex into a vertical arrangement when the screen is almost phone sized, at which point the content is still too squished to be useful. This is particularly a problem when you have tables in columns, because the tables will overflow into the next column if the screen is not wide enough, causing overlapping content. ### Solution Allow the width threshold for columns to be configured so that we can tune it to work better on different screen sizes used by our users, who are never going to be using phones, but do use laptop screens and wide or extra wide external monitors. If a column contains a table, that column should not shrink further than normal soft wrapping allows, and should not overflow outside the column. Instead, the columns should wrap so that they are arranged vertically, avoiding the need to squash or overflow the table. ### Additional context The HTML for columns generated by Streamlit uses a div that has a style attribute for flex properties rather than using a class, so we can't even override the CSS class definition to customise the flex behaviour. --- 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.**

Markus3 · December 9, 2024, 7:34am

Hi, thanks for your answer. I upvoted the issues

Topic		Replies	Views
Columns on different size screens Using Streamlit discussion	1	69	December 31, 2024
Changes in "st.column" placement according to screen size Using Streamlit discussion	5	785	August 22, 2024
Horizontal Flow layout Using Streamlit	4	2649	December 28, 2023
Unexpected st.columns behaviour Using Streamlit	2	483	January 25, 2023
St.columns not working on mobile version Using Streamlit	3	2208	July 28, 2023

St.Columns Responsive Behavior

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies