Compact layout and components?

Using Streamlit
1

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.
3 Likes
2

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):

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

Hope this helps!

Best regards,
Chanin

2 Likes
3

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!!

2 Likes
4

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:

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

Best,
David

5

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