Horizontal layout

[treuille]

Problem

Streamlit should support horizontal layout.

Use Case 1

zhun_t wanted to display images side-by-side.

(Note that in the special case of images, we already have limited support for this by passing an array of images into st.image.)

Use Case 2

In our old repo, @kellyamanda asked for the following:

I would like to be able to put a bunch of widgets horizontally next to each other. Almost like setting up st.table - I would ideally want to specify how many "spaces" or "cells" I have layered across and then in code from top to bottom, specify what goes where from right to left.

Basically I want to make a grid and from that grid put the widgets (or text or other elements) where I want in that grid.

Note To Users

This feature is in design right now, please add comments to this issue describing your use case to help us design this feature properly!

[superaja]

Use Case 3:

Maybe similar to @kellyamanda

Build an "Interactive Dashboard" using something more general like a bootstrap Grid layout where in addition to widgets and images, I can also put in multiple charts.

[ebonet-zz]

My use cases:

• Tufte-like reports, with plots by the side of the text
• Slightly more complex dashboards with better use of space

A suggested api could be:

row1 = st.empty() // or st.row()?

row1col1 = row1.col(width=100) // either width or width_ratio
row1col2 = row1.col(width_ratio=1) // If it is 1, or there's not enough space left, fill the remainder

row1col1.button("Hello")
row1col2.dataframe(...)

st.map(....)

This would generate the following grid:

+---------------|-------------------------------+           
|               |                               |           
|               |                               |           
|   Button      |        Dataframe              |           
|               |                               |           
|               |                               |          -
----------------|--------------------------------           
|                                               |           
|                                               |           
|                 Map                           |           
|                                               |           
|                                               |           
+-----------------------------------------------+ 

Notes:

• st.col() would create a col on the root pane
• A column could also have its own col1.empty() that would allow a column do be split the same way.

[paulelvers]

Use case 4:

Display Images with caption AND title/headline that supports markdown formatting and ability to reference hyperlinks. Alternatively, the st.image() function could support the function to reference a hyperlink for each image, which is opening by clicking on the image.

[imneonizer]

please add support for these grid layouts in sidebar as well so that we can design custom navigation menu or forms in sidebars currently text boxes are not supported in sidebars

[WaylonWalker]

For ultimate flexibility why not allow custom css. Flexbox and Grid have a great api, why try to abstract it away when trying to do custom/complex layouts. For those who are already familiar it would be one less new thing to know the intricate details of. For those who don't know, they would be able to learn a transferrable skill.

[imneonizer]

For ultimate flexibility why not allow custom css. Flexbox and Grid have a great api, why try to abstract it away when trying to do custom/complex layouts. For those who are already familiar it would be one less new thing to know the intricate details of. For those who don't know, they would be able to learn a transferrable skill.

Sorry to say man, i am already running away from css.. like i can't really remember so much tuning parameters if i had to learn that transferable skill than using flask would be another go to option available for me, that's the only reason why streamlit is different please don't merge them

[ajinkya933]

For ultimate flexibility why not allow custom css. Flexbox and Grid have a great api, why try to abstract it away when trying to do custom/complex layouts. For those who are already familiar it would be one less new thing to know the intricate details of. For those who don't know, they would be able to learn a transferrable skill.

Please dont merge them, what you want is already achievable using flask (https://www.fullstackpython.com/flask.html) . I don't see a need of streamlit redoing the same thing.

[WaylonWalker]

Streamlit offers a level of speed in prototyping things that no other framework does. There is no framework quite like streamlit, including flask. Apologies that I was not very clear. I am not advocating against having higher level components in python that do a good job at a few simple layouts. In fact I think it is a great idea. I am advocating for allowing access to a lower level api as well. Having access to the css would not only allow folks who know css to use it, but would allow them to build plugins/libraries that do exactly what you want without you needing to touch css.

From what I have seen in other frameworks is that when your layout gets complex and starts doing unexpected things its really hard to debug, requires expertise in yet another thing, and has a very small community to pull from rather than being able to copy a working solution from stack overflow, code sandbox, or codepen.

[MarcSkovMadsen]

My comment on the needed app and grid layout is here #486 (comment)

[MarcSkovMadsen]

And my use case is displaying something like 20 charts in a page for traders. The charts shows various aspects of the risks they are managing. They have very large, high resolution screen. I would like to provide most of those charts in a dashboard grid, each chart inside a card and not in the current report layout style.

[treuille]

@MarcSkovMadsen : What charting library are you using? Both Altair and matplotib allow you to have multiple charts stacked horizontally and vertically. Would that do what you want?

[MarcSkovMadsen]

Hi @treuille

I'm most often using Plotly and it can layout charts and their table in a grid.

But I wan't a fully flexible grid so that in some cells I have charts, some I have tables, some I have images or videos, some I have text and some I have widgets.

And I want those cells to be stylish like cards some times and very compact at other times :-)

But I've been thinking... That the reason Streamlit is great is that I don't spend a lot of time on laying out and styling stuff. I've been studying Panel extensively over the last two weeks. And they can sort of provide very advanced, custom layouts. But I see that then I start using a lot of time on laying out things via jinja2 templates and solving problems via css etc. I don't wan't that either.

I have a lot of comments and examples in some issues similar to this one

• Grid layout #309
• Compact layout and Dashboard layout needed #486

[rmitsch]

May I ask about the status on this issue? There are several other issues requesting functionality like this or similar, e.g. #309, #486, #360.
@tvst mentioned it being a priority on your roadmap - I'd be interested in how far along you guys are. I feel like the lack of layouting possibilities is one of the the biggest, yet simplest (relatively speaking) issues limiting streamlit's usefulness and applicability.

[treuille]

@rmitsch : We don't have a timeframe for this yet. :/ The priorities right now are:

• plug-in architecture (which will allow users to do more layout)
• easy deployment of Streamlit apps

We're still gathering requirements for the horizontal layout feature so sharing your specific use cases will be very useful!

[amorradev]

I need to use multiple Select Boxes in one horizontal line

option1 | option2 | option3 | option4 | option5 |
selectbox1 | selectbox2 | selectbox3 | selectbox4 | selectbox5 |

[jsmar17]

@treuille, Any update on progress? Layout/Grid functionality seems to be one of the most requested, so interested in regards to where it sits on priorities this year?

[andfanilo]

Hello,

There's this small usecase that popped in the forums :

It fits nicely to a flexbox (or Horizontal layout or Altair's HConcat whatever ;)) of st.text_input and st.button !

[jsmar17]

@treuille @tvst Hi Fellas! Been pretty quiet on this issue recently, any update on the planning/release for this?

[aldasmallthings]

agreed this is a PITA! otherwise love streamlit

[aldasmallthings]

do we have any update on this? currently deciding whether to refactor my app to dash :-) thanks team! @treuille @tvst

[treuille]

Hey all. Two solutions coming up:

1. Custom Components (which will used to call "Plugins") is coming out in H1 this year, and will give you some ability to lay out things more interestingly so long as you're willing to write the custom component in JS / React. (@tconkling is leading this effort. Please let @tc87 know if you'd like to beta-test.)
2. Fully, Python-based Horizontal Layout is coming in H2 this year.

I know that these timescales may seem long. Please note that these are two among several other major features coming out this year (see our roadmap). We're working around the clock to get these features to a high quality level and out the door! 🙏🏻Thank you for supporting Streamlit!! 🎈

[konstantinmiller]

My use case is to show text side by side. I'm working with NLP and I need this to, e.g., visualize quality of translation, or how a piece of text was transformed by a pipeline, etc. In the sense of "before" -> "after".

[Ankur-singh]

I have a similar use-case where I want show images side-wise. 'Before' -> 'After'
Any updates on when this feature will be released?

[randyzwitch]

Hi @Ankur-singh (and @konstantinmiller) -

We're working on horizontal layout and should have a public beta in a month or two.

Best,
Randy

[IFV]

I have a same user case!

…

On Tue, 18 Aug 2020, 11:55 Ankur-singh, ***@***.***> wrote: I have a similar use-case where I want show images side-wise. 'Before' -> 'After' Any updates on when this feature will be released? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#241 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADA7E3I3HPPNQLVE7ZOXPYTSBJFY5ANCNFSM4I4ZQDAQ> .

[kandarpkakkad]

My use cases:

• Tufte-like reports, with plots by the side of the text
• Slightly more complex dashboards with better use of space

A suggested api could be:

row1 = st.empty() // or st.row()?

row1col1 = row1.col(width=100) // either width or width_ratio
row1col2 = row1.col(width_ratio=1) // If it is 1, or there's not enough space left, fill the remainder

row1col1.button("Hello")
row1col2.dataframe(...)

st.map(....)

This would generate the following grid:

+---------------|-------------------------------+           
|               |                               |           
|               |                               |           
|   Button      |        Dataframe              |           
|               |                               |           
|               |                               |          -
----------------|--------------------------------           
|                                               |           
|                                               |           
|                 Map                           |           
|                                               |           
|                                               |           
+-----------------------------------------------+ 

Notes:

• st.col() would create a col on the root pane
• A column could also have its own col1.empty() that would allow a column do be split the same way.

I am not getting the output but instead getting:

StreamlitAPIException: col() is not a valid Streamlit command.

Traceback:
File "python.py", line 123, in
row1col1 = row1.col(width=100)

Kindly give anymore tips if you have or any idea to solve this.

[randyzwitch]

Hi @kandarpkakkad -

The functions you are trying to call aren't part of the library, so that's pretty self-explanatory on why it doesn't work. As mentioned, this feature is in development, with the expectation it would be released in the next month or two.

Best,
Randy

[kandarpkakkad]

Hi @kandarpkakkad -

The functions you are trying to call aren't part of the library, so that's pretty self-explanatory on why it does work. As mentioned, this feature is in development, with the expectation it would be released in the next month or two.

Best,
Randy

Thank you @randyzwitch
I will be waiting for this release.

[dalmia]

We want to add support for different filters for our dashboard and we ideally would like the filters (widgets) to be in a single row. Strongly waiting for this release!

[liu694246082]

Having something like the output from ipywidget would be awesome!!!

[akrolsmir]

Layouts are now available: https://blog.streamlit.io/introducing-new-layout-options-for-streamlit/

🥳

[nateGeorge]

I see the functions all have 'beta' in their names. Does this mean the function names are going to change soon and break backward compatibility? Sounds like a beta test or something.

Update: In fact, it seems some of the functions have already had 'beta' removed, such as st.beta_set_page_config(layout="wide") is now st.set_page_config(layout="wide").

[asaini]

Hi @nateGeorge,

Thanks for the question!

We consider features with beta_ to be less stable than other parts of the Streamlit library. As features become more stable they 'graduate' out of beta to become a part of the Streamlit library. (This is what happened to functions like st.beta_set_page_config).

The lifecycle of a beta feature is

1. A feature is added with the beta_ prefix.
2. The feature’s API stabilizes and the feature is cloned without the beta_ prefix, so it exists as both st and beta_. At this point, users will see a warning when using the version of the feature with the beta_ prefix – but the feature will still work.
3. At some point, the code of the beta_-prefixed feature is removed, but there will still be a stub of the function prefixed with beta_ that shows an error with appropriate instructions.
4. Finally, at a later date the beta_ version is removed.

beta_columns has been stable for a while and we are planning to graduate it out of beta in an upcoming release.

Please refer to our docs for a detailed description of beta_(and experimental_) features: https://docs.streamlit.io/en/stable/api.html?highlight=beta#beta-and-experimental-features

Thanks!

[steve7734]

hmmm 2 years later, and there is still no way to layout some buttons side by side (except using columns which leaves big gaps and looks worse). Is there a way to do this that I have missed?

[adrianliu]

Any progress on this?