Compact layout and components?

DCBB · June 20, 2023, 9:13am

While Streamlit’s components are quite pretty, I find that they are incredibly wasteful with screen space, compared to, say, R shiny or Tableau dashboards. For example, components like selectbox have huge font sizes and there is a lot of white space everywhere.

This creates a usability problem in applications like BI or interactive visualization, where you want to give power users many options to tweak without scrolling away from the main visualization. Tabs and expanders offer some relief, but they limit what you can have on the screen at one time.

I get that you shouldn’t overload your user interfaces. However, in my opinion, this argument does not apply to applications for power users, who want maximum information with minimum distraction. Look at BI dashboards, software used by finance pros, or just tools based on Excel spreadsheets – very high density, but that’s what those users want and need. At least the users I’m trying to convince of using Streamlit apps instead of Excel sheets.

So, I’m wondering whether anyone has tried to tweak Streamlit to be a bit more compact?
Are there any official roadmap plans in that direction?
Anybody else struggling with this?

Here are some thoughts:

I think that the new-ish options to omit labels, as well as radio’s horizontal options are good steps in that direction.
An option for a smaller font in selectbox, multiselect, and elsewhere could be a low-hanging fruit.
It would be nice to get rid of this enormous whitespace at the top of every app.

dataprofessor · June 20, 2023, 12:46pm

Hi David,

Thanks for taking the time to give us some thoughts and suggestions, greatly appreciated. I’ll make sure to forward this to our product managers.

Speaking of the roadmap, it is publicly available at https://roadmap.streamlit.app/ and you’ll be glad to see that “Visual Customization” is in the roadmap as well. For a high-level overview of the Streamlit roadmap also check out the following blog:

In the mean time, all layout of a Streamlit app can be customized by adjusting the CSS. I made a video on how to do so in the video below (code in the video description):

How to apply custom CSS styles in Streamlit apps - YouTube

Also, an example dashboard app that make use of a wide layout is created in the video below (code in the video description):

How to Build a Dashboard Web App in Python with Streamlit - YouTube

Hope this helps!

Best regards,
Chanin

jrieke · June 20, 2023, 1:00pm

Hey @DCBB! For whitespace at the top of the app, we have a GitHub issue here, please feel free to upvote that and leave additional comments if you like. Might also make sense to open another issue on compact layout in general. I don’t think we have one as far as I’m aware. We usually try to have feature requests on GitHub so a) others can upvote them and b) they don’t get lost among the thousands of other forum posts. Thanks for your input!!

DCBB · June 20, 2023, 2:51pm

Hi @dataprofessor and @jrieke ,

Thanks a lot for your replies! I will look at the resources you provided.

As suggested by @jrieke, I have upvoted #6336 and I have created a dedicated enhancement-type issue:

github.com/streamlit/streamlit

Compact layout and compact widgets to get the most from the available screen space

opened 02:48PM - 20 Jun 23 UTC

dcbb

type:enhancement

### Problem Streamlit's overall layout and individual components are quite wa…steful with screen space – there is a lot of white space everywhere. This is great for simple apps for casual users, but it creates a usability problem in applications where you want to give power users many options to tweak without scrolling away from the main visualization or data table, or just provide a high information density on one screen. Tabs and expanders offer some relief, but they limit what you can have on the screen at one time. Applications like Tableau, R shiny, and the ubiquitous Excel based tools have a much higher information density than Streamlit apps. If Streamlit aims to be an alternative to those applications in "power user" scenarios (think finance, BI, scientific visualization,...), it needs the capability to present UIs with higher density. Examples of very generous use of space: * large font size in widgets like `selectbox`, `multiselect`, `slider`, and others * large size of the main widget "box" in `selectbox`, `number_input` and others * `file_uploader` is huge! * tables aren't particularly compact either * lots of white space between components * whitespace on top of screen (see #6336, but the issue here is wider) Things that go in the right direction: * wide mode * horizontal layout for `radio` * the new options for label placement, including the option to ditch the labels altogether * sometimes it just helps to zoom out in the browser, but of course that is not a solution ### Solution **MVP:** What's the smallest possible solution that would get 80% of the problem out of the way? * provide a "compact layout" and/or "small fonts" option for the chunkiest controls; see examples above * solve #6336 * provide an alternative style option that reduces whitespace between components **Possible additions:** What are other things that could be added to the MVP over time to make it better? * more options for label placement, for example left of control (I realize, though, that this probably generates ugly alignment problem; maybe there could be some sort of "form table", where labels are in one column and controls next to it) * just more layout options in general – grids, complex multicolumn alignment – would help to make use of screen space ### Additional context Where I work, I'm heavily advertising replacing insanely complex Excel-tools with proper Python code + Streamlit UI. While there is a lot of buy-in for replacing the actual logic with Python, I frequently meet resistance when it comes to the UI. As much as I dislike Excel – you can get a lot of control on a single screen there. I have seem similar arguments when it comes to pitching Streamlit + Altair as an alternative to Tableau. This issue was created as suggested in the forum [on this thread](https://discuss.streamlit.io/t/compact-layout-and-components/45639/3). --- 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.**

Let me know if the github issue I posted can be improved.

Best,
David