Modal and SideBar overlapping

Hello everybody!

I am developing a streamlit application where I am using st.sidebar and from streamlit_modal import Modal.
When the modal is popped up, i.e when its openned, it overlaps with the sidebar, but the sidebar stays in front of the modal, and that was not the expected result.
I would like to keep the modal on top of the sidebar or resize it to not overlap with the sidebar.

Any tips on how to solve it?
Thanks in advance

Hi @Gabriel21,

Thank you for sharing your question with the community!

Your post is missing a code snippet and a link to your app’s GitHub repo. Please check out our guidelines on how to post an effective question here and update your post to help the community answer your question.

You can use st.columns to create a layout with two columns: one for the sidebar and the other for the main content including the modal.

import streamlit as st
from streamlit_modal import Modal

# Create a layout with two columns
sidebar_col, empty_col, main_col = st.columns([1, 2, 4])

# Sidebar content
with sidebar_col:
    # Add your sidebar elements here
    st.sidebar.button("Sidebar Button")

# Main content including the modal
with main_col:
    st.title("Main Content")
    st.write("Main content goes here")

    # Create and display the modal
    with Modal():
        st.write("Modal content goes here")
        st.button("Close Modal")
1 Like