Markus3
December 8, 2024, 11:34am
1
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?
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:
opened 10:17PM - 14 Sep 22 UTC
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.**
opened 01:52AM - 28 Apr 23 UTC
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.**
Hi, thanks for your answer. I upvoted the issues
system
June 7, 2025, 7:35am
4
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.
