Adding widgets to sidebar hides the page navigation

Using Streamlit
1

I have an app with three pages. I added two text input widgets in the sidebar that are being preserved across all three pages using session state as shown below. However, this causes the page navigation to be slightly hidden by the widgets (with an expander, but I’d like to avoid that if possible.)

if 'project' not in st.session_state:
   value_project = ""
else:
    value_project = st.session_state['project']
if 'email' not in st.session_state:
   value_email = ""
else:
    value_email = st.session_state['email']
st.sidebar.text_input('Project name', value=value_project, key='project')
st.sidebar.text_input('Email address', value=value_email, key='email')

image
image858×1353 63 KB

Is there any way to push the widgets to the bottom of the sidebar to avoid them overlapping with the page navigation? Or move the widgets above the page navigation?

2

There is a guide on how to post properly especially if you have issues encountered.

3

You can increase the minimum height of the navigation section with css. At the end of your page, add:

css='''
[data-testid="stSidebarNav"] {
  min-height: 50vh
}
'''
st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
4

Thank you, that works great!!

1 Like
5

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