Streamlit popup window - streamlit_modal

I built some buttons in different columns, and the button will open a modal.
then the modal width is same as column.

import streamlit as st
from streamlit_modal import Modal
modal = Modal(key="Demo Key",title="test")
for col in st.columns(8):
    with col:
        open_modal = st.button(label='button')
        if open_modal:
            with modal.container():
                st.markdown('testtesttesttesttesttesttesttest')

Every modal’s width is very small and same as column width, is there any other function to build a popup window?
image

2 Likes

It is hard to tell because your code is not indented, but I guess you are nesting the modal inside the column. Do not do that if that is not what you want.

1 Like

Oh sorry, I forgot to indent.
Here’s my code, I’m doing this because I need to build different buttons in the column, and click different buttons to display the popup with the related data.

1 Like

Indeed you are nesting the modal inside the column, which apparently is not what you want.

OTOH you cannot really run that code because it tries to create duplicate widgets, so I might be misinterpreting your issue.

1 Like

This is the code I used to demonstrate, so I wonder if there is any other way to define a fixed popup and display data, the buttons have different label and data?

1 Like

Yes, one other way would be not nesting the popup inside the column.

1 Like

I see, but button widget is in the column, I want to click the button to show the popup and have already defined the modal outside, only open the container in column, but there’s still small width.
I have no idea how to move the popup outside after clicking button.

1 Like

Just move the code that opens the popup outside the column context manager.

1 Like

Thanks, this is probably the only way right now.

1 Like

Hi Goyo, could I know how did you make it work? I am facing the same issue. I really appreciate your help!

1 Like

Hi Ethanyan, could you suggest how did you make it work? Thanks for help!

1 Like

Did you try moving the code that opens the popup outside the column context manager?

1 Like

This is the code I have, however it is not working, and it seems to stuck at the line for model.open() forever.
Capture

1 Like

You can only define button in column but move open_modal out, like this

with gr[19]:
    open_modal=st.button("Open","rt")
if open_modal:
    modal.open()
1 Like

This works amazing! Thanks for help!!

1 Like

Hi @ethanyan, I love your work you’ve done and thank you.
I wonder if you can make the modal scrollable?

Thanks

1 Like

Hello everyone, i am creating an app that help users to insert or update data from a sql table through some widgets, using them as a form, then te user clicks the save button and the modal popup is displayed, but i have some problems regarding the popup:

  1. if the sidebar is opened, the popup is not seen properly (it is behind the sidebar)
  2. If my page layout is wide, the popup adapts to all the frame of the page and i want to avooid it

hope anyone can help me:


my code is:

confirmationEdit = Modal("Atención", key= "popUp_edit")

(...) the widgets

submitted = st.button("Enviar")

           if submitted:
                 confirmationEdit.open()
        
           if confirmationEdit.is_open():
                    with confirmationEdit.container():
                        st.markdown(""" ### ¿Deseas guardar los cambios? """)
                        yes = st.button("Sí")
                        no  = st.button("No")

                        if yes == True:
                           (...) format data
                           confirmationEdit.close()

                        if no == True:
                            confirmationEdit.close()
1 Like

is there a way to put the modal in the center? it goes to the left side for me completely

1 Like

Hi. I am trying to create popup filter window and found small problem here. It looks like box inside not big enough, so the scroll appear in any case. I can’t figure out how to fix it. Could you help me?

1 Like