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

1 Like
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.

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.

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.

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?

7

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

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.

9

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

10

Thanks, this is probably the only way right now.

11

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

12

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

13

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

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

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()
16

This works amazing! Thanks for help!!

17

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

Thanks