Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal layout #241

Open
treuille opened this issue Oct 2, 2019 · 20 comments
Open

Horizontal layout #241

treuille opened this issue Oct 2, 2019 · 20 comments

Comments

@treuille
Copy link
Collaborator

@treuille treuille commented Oct 2, 2019

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

This comment has been minimized.

Copy link

@superaja superaja commented Oct 2, 2019

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

This comment has been minimized.

Copy link

@ebonet ebonet commented Oct 7, 2019

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

This comment has been minimized.

Copy link

@paulelvers paulelvers commented Oct 15, 2019

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

This comment has been minimized.

Copy link

@imneonizer imneonizer commented Oct 18, 2019

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

This comment has been minimized.

Copy link

@WaylonWalker WaylonWalker commented Oct 20, 2019

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

This comment has been minimized.

Copy link

@imneonizer imneonizer commented Oct 20, 2019

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

This comment has been minimized.

Copy link

@ajinkya933 ajinkya933 commented Oct 21, 2019

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

This comment has been minimized.

Copy link

@WaylonWalker WaylonWalker commented Oct 21, 2019

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

This comment has been minimized.

Copy link

@MarcSkovMadsen MarcSkovMadsen commented Nov 1, 2019

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

@MarcSkovMadsen

This comment has been minimized.

Copy link

@MarcSkovMadsen MarcSkovMadsen commented Nov 1, 2019

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

This comment has been minimized.

Copy link
Collaborator Author

@treuille treuille commented Nov 11, 2019

@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

This comment has been minimized.

Copy link

@MarcSkovMadsen MarcSkovMadsen commented Nov 21, 2019

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

@rmitsch

This comment has been minimized.

Copy link

@rmitsch rmitsch commented Dec 17, 2019

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

This comment has been minimized.

Copy link
Collaborator Author

@treuille treuille commented Dec 31, 2019

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

@AhmedMorra1

This comment has been minimized.

Copy link

@AhmedMorra1 AhmedMorra1 commented Jan 3, 2020

I need to use multiple Select Boxes in one horizontal line

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

@jsmar17

This comment has been minimized.

Copy link

@jsmar17 jsmar17 commented Jan 24, 2020

@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

This comment has been minimized.

Copy link
Contributor

@andfanilo andfanilo commented Feb 3, 2020

Hello,

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

image

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

@jsmar17

This comment has been minimized.

Copy link

@jsmar17 jsmar17 commented Feb 26, 2020

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

@aldasmallthings

This comment has been minimized.

Copy link

@aldasmallthings aldasmallthings commented Mar 31, 2020

agreed this is a PITA! otherwise love streamlit

@aldasmallthings

This comment has been minimized.

Copy link

@aldasmallthings aldasmallthings commented Mar 31, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.