Streamlit popup window - streamlit_modal

Using Streamlit
1

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

3 Likes
2

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
4

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
5

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
6

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
7

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

1 Like
8

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
9

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

1 Like
10

Thanks, this is probably the only way right now.

1 Like
11

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

1 Like
12

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

1 Like
13

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

1 Like
14

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
15

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
16

This works amazing! Thanks for help!!

1 Like
17

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

Thanks

1 Like
18

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:

image
image1914×985 51.9 KB

image
image1906×928 108 KB

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
19

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

1 Like
20

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?

image
image1783×654 24.3 KB

1 Like
21

st.experimental_dialog is available with Streamlit version 1.34.0!