Modal and SideBar overlapping

Using Streamlit
1

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

2

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.

3

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.header("Sidebar")
    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.header("Modal")
        st.write("Modal content goes here")
        st.button("Close Modal")
2 Likes
4

Is this really the only solution? Is there no way to make the modal appear in front of the sidebar?

5

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