Fix the vertical position of Streamlit containers relative to viewport instead of page
Install streamlit-float with pip:
pip install streamlit-floatThis package provides two ways to float a container. The first is to call the float method of a container:
import streamlit as st
from streamlit_float import *
# initialize float feature/capability
float_init()
col1, col2 = st.columns(2)
# Fix/float the whole column
col1.write("This entire column is fixed/floating")
col1.float()
with col2:
container = st.container()
# Fix/float a single container inside
container.write("This text is in a container that is fixed")
container.float()Alternatively, you can use the float_parent method:
import streamlit as st
from streamlit_float import *
# initialize float feature/capability
float_init()
col1, col2 = st.columns(2)
# Fix/float the whole column
with col1:
st.write("This entire column is fixed/floating")
float_parent()
with col2:
container = st.container()
# Fix/float a single container inside
with container:
st.write("This text is in a container that is fixed")
float_parent()Note that the float feature does not work well with expander and tabs containers. Also, it is recommended to call the float methods on a container after all the content has been added to it.
If instead you would like to float/fix a container that is constructed in html markup and added using Streamlits markdown method (with unsafe_allow_html=True), make sure to add 'floating' to the containers classlist.
st.markdown('''<div class="floating">..content..</div>''', unsafe_allow_html=True)You can now add your own CSS to any container you float by providing a string containing the CSS!
Example:
import streamlit as st
from streamlit_float import *
# Float feature initialization
float_init()
# Create footer container and add content
footer_container = st.container()
with footer_container:
st.markdown("Copyright © 2023 Your Name - All Rights Reserved.")
# Float the footer container and provide CSS to target it with
footer_container.float("bottom: 0;background-color: white;")Currently, both float and float_parent take a string containing CSS as their only (optional) argument.
The streamlit_float module now contains a CSS helper function that makes it easier to generate CSS for floating containers programmatically.
Example:
import streamlit as st
from streamlit_float import *
# Float feature initialization
float_init()
# Create footer container and add content
footer_container = st.container()
with footer_container:
st.markdown("Copyright © 2023 Your Name - All Rights Reserved.")
# Get custom theme background color if set, otherwise default to white
bg_color = st.get_option('theme.backgroundColor')
if bg_color is None:
bg_color = "white"
# Generate CSS to target the floating footer container
css = float_css_helper(bottom="0", background=bg_color)
# Float the footer container and provide CSS to target it with
footer_container.float(css)The newly added float_box function takes the markdown you provide it and puts it in a newly created floating div container. This function also provides direct access (via its arguments) to several CSS parameters/attributes allowing you to easily adjust size, position, background, and border as well as add box-shadows and transitions.
Example:
import streamlit as st
from streamlit_float import *
# Float feature initialization
float_init()
# Initialize session variable that will show/hide Float Box
if "show" not in st.session_state:
st.session_state.show = True
# Page content
st.markdown(''' ...PAGE CONTENT GOES HERE... ''')
# Container with expand/collapse button
button_container = st.container()
with button_container:
if st.session_state.show:
if st.button("⭳", type="primary"):
st.session_state.show = False
st.experimental_rerun()
else:
if st.button("⭱", type="secondary"):
st.session_state.show = True
st.experimental_rerun()
# Alter CSS based on expand/collapse state
if st.session_state.show:
vid_y_pos = "2rem"
button_b_pos = "21rem"
else:
vid_y_pos = "-19.5rem"
button_b_pos = "1rem"
button_css = float_css_helper(width="2.2rem", right="2rem", bottom=button_b_pos, transition=0)
# Float button container
button_container.float(button_css)
# Add Float Box with embedded Youtube video
float_box('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/J8TgKxomS2g?si=Ir_bq_E5e9jHAEFw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>',width="29rem", right="2rem", bottom=vid_y_pos, css="padding: 0;transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);", shadow=12)
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)
# 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()
This project is licensed under the MIT License