Scroll bars in Streamlit page are too small

Question

I have to show a very wide plotly plot through Streamlit. However, both the horizontal and vertical scroll bars created by Streamlit are tiny/thin and thus very difficult to see and use.
Did some quick google search but didn’t see instructions to control the scroll bar appearance on the webpage. Any help is much appreciated!

Asked By: Ramon

||

Source

Answer 1

I don’t think there’s a straightforward way to do this. You can inject your own html/css in your app, so perhaps that could work to reconfigure the scroll bar behavior. Streamlit’s components API may also be helpful.

Answered By: erikz

Answer 2

This is how I did it using st.markdown ->

st.markdown("""
                <html>
                    <head>
                    <style>
                        ::-webkit-scrollbar {
                            width: 10px;
                            }

                            /* Track */
                            ::-webkit-scrollbar-track {
                            background: #f1f1f1;
                            }

                            /* Handle */
                            ::-webkit-scrollbar-thumb {
                            background: #888;
                            }

                            /* Handle on hover */
                            ::-webkit-scrollbar-thumb:hover {
                            background: #555;
                            }
                    </style>
                    </head>
                    <body>
                    </body>
                </html>
            """, unsafe_allow_html=True)

They key thing is to make sure this code is added after the page subheader or you may face errors like st.pageconfig is allowed only once.

Let me know if this helps. Thank you.

Answered By: Devansh Popat

Scroll bars in Streamlit page are too small

Question:

Answers: