Horizontal scrolling problem

[victorbnnt]

Hello,

I would like to create an app with Streamlit to be accessible with smartphones. I have a problem with horizontal scrolling. I would like the app to be responsive and I don’t want any horizontal scrolling.

The problem is, when I use a simple streamlit.image(“my_image”), when I try then to display the result on a smartphone screen, there is always a horizontal scrollbar that appears.I tried every parameters I found about width, nothing changed, there is always this scroll bar appearing for nothing.

As you can see on the capture below, I change the width of the image to clearly show that its width is below the screen width, there shouldn’t be a scrollbar needed, but you can see that, it is possible to scroll right, and thus the screen is cropped

Is there a solution to this problem ?

Thank you in advance
Best regards

[victorbnnt]

I found a temporary workaround by using the following code:

with open("outputs_pdf/foo.png", "rb") as img_file:
    my_string = base64.b64encode(img_file.read())
    s = my_string.decode('UTF-8')

html = f"""<div style='width:100%; display:block; overflow:hidden'>
                    <img style='margin-top:-140px; width:100%' src='data:image/jpeg;base64,{str(s)}'>
               </div>"""

It displays an image full width without this scrolling problem.

But I said temporary because I have the same problem of horizontal scrollbar appearing when I want to display a matplotlib or plotly graphic …

Is there a solution to this problem ?

Thanks

[angelicaba23]

Hi, how can i do a horizontal scrolling like this