How to set width of `st.dialog` as a fraction of the page's width

Using Streamlit
1

For example, st.dialog("title", width_ratio=0.8). I tried wrapping with custom css using a stylized container, but the identifier is not fixed so I couldn’t easily change the width arbitrarily.

2

You can achieve that with css:

st.markdown('''<style>
div[data-testid="stModal"] div[role="dialog"] {
    width: 80%;
}
</style>''', unsafe_allow_html=True)
3

I tried something like this but (a) it doesn’t let you isolate to only a specific dialog (applies to all), and (b) for some reason it doesn’t work with height.

4

Here’s a method that works to set the width and height, but only on certain dialogs (the ones that have a span with class big-dialog in them).

import streamlit as st

st.markdown(
    """
<style>
div[data-testid="stDialog"] div[role="dialog"]:has(.big-dialog) {
    width: 80vw;
    height: 80vh;
}
</style>
""",
    unsafe_allow_html=True,
)


@st.dialog("Title")
def show_dialog():
    st.write("Hello, this is a dialog.")
    st.html("<span class='big-dialog'></span>")


@st.dialog("Title")
def show_dialog2():
    st.write("Hello, this is a dialog 2.")


if st.button("Show Big Dialog"):
    show_dialog()

if st.button("Show Normal Dialog"):
    show_dialog2()
2 Likes
5

Thanks for this, @blackary! It makes such a big difference.

Are there any plans to make this part of st.dialog itself? I think it’s worth linking to this GitHub issue discussing the feature.

6

Thanks for linking that – if you have a specific use-case where a wider dialog would be really helpful, then you might want to :+1: on the issue, and add an example where it would be helpful.

7

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