Skip to content

Responsive layout#104

Merged
arraydude merged 10 commits intostreamlit:developfrom
arraydude:sidebar
Sep 19, 2019
Merged

Responsive layout#104
arraydude merged 10 commits intostreamlit:developfrom
arraydude:sidebar

Conversation

@arraydude
Copy link
Copy Markdown
Contributor

Sidebar should be visible at all screen sizes down to 800px width (i.e. not mobile)

@arraydude arraydude requested a review from tvst September 13, 2019 16:32
@arraydude arraydude changed the title Sidebar Responsive layout Sep 13, 2019
@jrhone
Copy link
Copy Markdown
Contributor

jrhone commented Sep 17, 2019

I think I'm seeing the sidebar visible to around 756px

@arraydude
Copy link
Copy Markdown
Contributor Author

arraydude commented Sep 17, 2019

With @tvst agreed on this:

Layout = 2 columns responsive
First column = sidebar = fixed width (250px)
Second column = content = responsive but the content needs to be max-width: 730px ( center aligned )
On mobile = max-width: 746px
Layout = 1 column
Content = same
Sidebar = hidden

I only have to change the max-width to 746, i'm using 756 it's a typo

@jrhone
Copy link
Copy Markdown
Contributor

jrhone commented Sep 17, 2019

What's wide mode? How to enable it and what's the behavior?

@arraydude
Copy link
Copy Markdown
Contributor Author

arraydude commented Sep 17, 2019

What's wide mode? How to enable it and what's the behavior?

You can enable wide mode from Settings option . There is a checkbox that you can enable or disable.

@tvst
Copy link
Copy Markdown
Contributor

tvst commented Sep 18, 2019

I tested this locally, but I'm seeing some strange behavior still. It starts when I shrink the window down to ~1485px. At that point the main content alignment changes and starts misbehaving from there on.

It's hard to describe so let's VC tomorrow and I'll show you what I mean.

@jrhone
Copy link
Copy Markdown
Contributor

jrhone commented Sep 18, 2019

I think something has changed with the last two commits.. behavior was better prior.. now slightly wonky as Thiago said.

Edit: Actually, just tested wide mode for the first time and it seems to work well but regular mode is a bit off

@jrhone
Copy link
Copy Markdown
Contributor

jrhone commented Sep 18, 2019

Looks better.. except in regular mode, from 805 - 790 px the right margin starts to collapse until it disappears, then reappears again when the sidebar contracts and stays.

In wide mode the right margin stays.

Copy link
Copy Markdown
Contributor

@jrhone jrhone left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@arraydude arraydude merged commit d4dced8 into streamlit:develop Sep 19, 2019
@arraydude arraydude deleted the sidebar branch September 19, 2019 19:23
tconkling added a commit to tconkling/streamlit that referenced this pull request Sep 23, 2019
* develop:
  Release 0.46.0 (streamlit#170)
  Magic fixes (streamlit#138)
  [docs] Add analytics; redirect /secret/docs; fix compilation problem (streamlit#149)
  Fix bug for startup under windows (streamlit#144)
  Responsive layout (streamlit#104)
  Add basic PR template
  Better method signatures (streamlit#88)
  Publish docs to both /docs and /secret/docs, until we deprecate /secret/docs in January. (streamlit#141)
  Rename/report2app (streamlit#126)
tconkling added a commit to tconkling/streamlit that referenced this pull request Sep 23, 2019
* develop: (54 commits)
  Removing uber demo from streamlit repo (streamlit#159)
  Release 0.46.0 (streamlit#170)
  Magic fixes (streamlit#138)
  [docs] Add analytics; redirect /secret/docs; fix compilation problem (streamlit#149)
  Fix bug for startup under windows (streamlit#144)
  Responsive layout (streamlit#104)
  Add basic PR template
  Better method signatures (streamlit#88)
  Publish docs to both /docs and /secret/docs, until we deprecate /secret/docs in January. (streamlit#141)
  Rename/report2app (streamlit#126)
  Test running streamlit commands "bare" (streamlit#133)
  Updates to LP and sidebar. (streamlit#134)
  tests for z-index of date input popover in sidebar (streamlit#131)
  cypress test for escaping html in markdown (streamlit#125)
  On a Mac, check if xcode installed before requiring watchdog (streamlit#91)
  [Docs] Fix st.slider API in tutorial (streamlit#98)
  Sidebar exceptions (streamlit#107)
  Fixing unbound local variable (streamlit#110)
  Support hashing dataframes with unhashable objects. Gracefully f… (streamlit#118)
  Fix hashing if the object has a name but the name is not a string. (streamlit#117)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants