App slides left to right on mobile, doesn't fit screen

🦄 Random
1

Hi there!

I’ve noticed that my app (code here) - as well as pretty much every app I’ve run from the Streamlit Gallery that has any tables or graphs in it - slides from left to right on mobile (iPhone, or narrowest possible window in desktop Safari and Chrome).

Please could Streamlit fix this? It makes apps very frustrating to use on mobile. I suspect it has something to do with breakpoints, as there is no sliding when I make the window just a few pixels wider. Is this being worked on?

Cheers,
Aden

@Adrien_Treuille @Charly_Wargnier

2

Hey @adenhaus,

First welcome to the community! :partying_face: :tada: :star2:

Do you have an iPhone by chance? When I go to the app you linked here I again (same as in this thread) can’t reproduce any wiggle in the scrolling.

Happy Streamlit-ing!
Marisa

3

Hi @Marisa_Smith thanks for the welcome! I am really enjoying Streamlit.

Yes, as I mentioned here:

I am using Safari and Chrome on an iPhone, and Safari and Chrome on a MacBook (where it slides when I make the browser windows as narrow as possible).

And to reiterate: it isn’t only my app, it’s all Streamlit apps except ones that only have text, for some reason those seem immune to the sliding.

image
image1125×2436 137 KB

image
image1125×2436 136 KB

Kind regards
Aden

4

Hey @adenhaus,

Ah! Not sure how I missed that on my first read-through (sorry about that :rofl:)!

Since this has been requested 2 times, and I have a method for the team to reproduce it (I told them to make the browser super narrow), I have created a Github issue for it. If you want it to gain traction comment on it or like it to have it gain momentum with the team!

here is the link: App "wiggles" back and forth on mobile or small width browsers (Mac and iPhone) · Issue #3649 · streamlit/streamlit · GitHub

Happy Streamlit-ing!
Marisa

CC @oltipreka @chefnewman please do the same if either of you are still facing issues

5

Hi @Marisa_Smith

My problem was actually solved with your last fix.

Thanks - appreciate it!

1 Like
6

@chefnewman yeah but it’s a bit of a hacky solution that only works for your app. The problem needs to be solved at its source.

7

Hi @Marisa_Smith

No problem :grinning:

Thanks for opening the issue on GitHub! Appreciate it. I’d like to share my app with my friends and colleagues, but I know many of them will view it on their phones, so the mobile experience is important.

Cheers,
Aden

8

Hello @adenhaus @Marisa_Smith . I wonder if there has been a formal solution to this problem? If not, have you found any workaround with css markdown? Thanks.

9

It seems that this could be fixed with very small css hack, disallowing horizontal scrolling?

streamlit app:

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

local_css("style.css")

style.css:

section[tabindex="0"] {
    overflow-x: hidden;
}