Disable scrollbar

Using Streamlit
1

Hi all,

Is there a way to disable scrollbar?

I am building an one-page app where the content does not exceed screen height, the scrollbar appears anyways even when there is nothing below the main component.

I’d really like my page to be fixated. Is there an option to disable the scrollbar?

thanks in advance,
Don

2

I’m looking for this too.

I thought you could use the ‘overflow’ tag in CSS, but it doesn’t seem to work in Streamlit.

body {
  overflow: hidden; /* Hide scrollbars */
}
3

I am also looking to display dashboard on entire screen without scroll bar

4

Did you got the solution, am also looking for this

5

Also interested in this… has anyone found a solution?

6

You can use css to reduce the empty space that is the padding before the footer. Try the at the end of your page:

css = '''
<style>
section.main > div:has(~ footer ) {
    padding-bottom: 5px;
}
</style>
'''
st.markdown(css, unsafe_allow_html=True)
1 Like
7

I found a solution. At least it works with columns and chat_message.

css = '''
<style>
    [data-testid="ScrollToBottomContainer"] {
        overflow: hidden;
    }
</style>
'''

st.markdown(css, unsafe_allow_html=True)
8

This disables the scroll on the main section.

st.html("<style> .main {overflow: hidden} </style>")

9

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.