I used the Dialog container with my own css!
1 Like
It meshes really well with the rest of your page! Looks nicer than the one I put in the demo.
Hehehe! Just a few adjustments with CSS and we were able to apply this Dialog container to any application and in a very modern way. The most incredible thing is that your modal seems even more fluid and functional than the one below:
There is even an issue for streamlit to release this component more quickly:
I don’t know if you’ve already managed to present this project as a solution to this issue. I think it’s a good idea.
1 Like
I was not aware of this. That is interesting. I am not entirely sure what their end goal/desired result is, so I cant comment much on their approach, but I will definitely look into it further and see if it makes sense to post my approach.
I think one of the benefits of my approach is that I literally just alter the css of existing streamlit containers (and use css transitions). I cant imagine it would be too difficult to extend an existing container class and add the necessary css to to achieve the same results.
Thanks again for bringing this to my awareness.
1 Like
Hey everyone!
Happy New Year!
I have just completed adding some new features and updating some of the existing ones!
NEW Float Dialog container
The float_dialog function creates a streamlit container that is manipulated to have the appearance and behavior of a simple dialog box. This function takes a boolean which shows or hides the dialog box.
Example:
import streamlit as st
from streamlit_float import *
# Float feature initialization
float_init()
# Initialize session variable that will open/close dialog
if "show" not in st.session_state:
st.session_state.show = False
# Button that opens the dialog
if st.button("Contact us"):
st.session_state.show = True
st.experimental_rerun()
# Create Float Dialog container
dialog_container = float_dialog(st.session_state.show, background="var(--default-backgroundColor)")
# Add contents of Dialog including button to close it
with dialog_container:
st.header("Contact us")
name_input = st.text_input("Enter your name", key="name")
email_input = st.text_input("Enter your email", key="email")
message = st.text_area("Enter your message", key="message")
if st.button("Send", key="send"):
# ...Handle input data here...
st.session_state.show = False
st.experimental_rerun()
Note that the float_init function calls a function called theme_init which grabs some of the default theme values like background color. This theme_init then creates CSS variables with those values. The new CSS variables are:
--default-backgroundColor
--default-textColor
--default-font
These CSS variables become available to you when theme_init is called and can be used in any CSS you add via st.markdown.
Note that in the example above, one of the CSS variables is used to set the background of the dialog to be the same as the app.
Another development that may be of interest is the addition of two new configuration arguments to the float_dialog function: transition_from and transition_to. Each argument accepts one of three possible values: top, bottom, and center. These values change where the dialog container pops into view from and where its final position will be once the transition ends.
"top" → "top"
"top" → "center"
"bottom" → "bottom"
"center" → "center"
Choosing "center" for both is recommended for cases where speed and simplicity (no frills) are preferred.
NEW Float Overlay
The float_overlay function creates a simple overlay (using float_box under the hood) that blurs and dims everything underneath it. By default, the overlay is placed on top of everything but the header bar. This can be changed using the function’s z_index argument.
The idea here is that you can use streamlit-float functions to float specific content and selected things above the overlay while everything else is placed underneath (becoming less visible and inaccessible).
Example:
import streamlit as st
from streamlit_float import *
# Float feature initialization
float_init()
# Initialize session variable that will open/close dialog
# We start the app with our tutorial overlay on
if "show" not in st.session_state:
st.session_state.show = True
# add overlay
float_overlay(st.session_state.show, alpha=0.2, z_index="999980")
# Add container with close overlay button
if st.session_state.show:
close_button_container = st.container()
with close_button_container:
if st.button("Close", key="close"):
st.session_state.show= False
st.experimental_rerun()
# Float close button container
close_button_container_css = float_css_helper(width="2.2rem", right="4rem", bottom="2rem", z_index="999999")
close_button_container.float(close_overlay_css)
# Add content that will sit on top of overlay
float_box('<div style="height:fit-content;">Click close button to exit tutorial </div><div>↴</div>', height="2rem", right="2.7rem", bottom="7.5rem", background="transparent", css="min-width: 25%; width:fit-content;flex-direction: row;justify-content: right;color: #ffffff;font-size:1.8rem;z-index:999999;gap:0.5rem;")
4 Likes
This seems to create a conflict with the inbuilt “float” python method. Specifically when I try to use it, I get …
You can use __builtin__.float, "float", "float64" or (if you have imported numpy) numpy.float64 instead.
For now, you can follow one of @Goyo’s suggestions.
Looking forward, I think there might be a way to allow calling the float function on a container with out naming the function itself float which would avoid this problem. The only problem is whether or not the float function is used by users directly by itself if that makes sense. I will look into it.