Skip to content

Instantly share code, notes, and snippets.

@asehmi
Forked from toolittlecakes/st_fixed_container.py
Created April 1, 2024 16:19
Show Gist options
  • Save asehmi/942f298cdabda02c7f1623168714a73f to your computer and use it in GitHub Desktop.
Save asehmi/942f298cdabda02c7f1623168714a73f to your computer and use it in GitHub Desktop.
Sticky/fixed container for streamlit apps. Supports dynamic width change as well as dynamic color updates. Both top/bottom positions are available.
from typing import Literal
import streamlit as st
from streamlit.components.v1 import html
FIXED_CONTAINER_CSS = """
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) {{
position: {mode};
width: inherit;
background-color: inherit;
{position}: {margin};
z-index: 999;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) div[data-testid="stVerticalBlock"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) > div[data-testid="stVerticalBlockBorderWrapper"] {{
background-color: inherit;
width: 100%;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) div[data-testid="stVerticalBlock"]:has(div.fixed-container-{id}):not(:has(div.not-fixed-container)) > div[data-testid="element-container"] {{
display: none;
}}
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.not-fixed-container):not(:has(div[class^='fixed-container-'])) {{
display: none;
}}
""".strip()
FIXED_CONTAINER_JS = """
const root = parent.document.querySelector('.stApp');
let lastBackgroundColor = null;
function updateContainerBackground(currentBackground) {
const containerElements = getContainers();
containerElements.forEach(containerElement => {
containerElement.querySelectorAll('div[data-testid="stVerticalBlockBorderWrapper"]').forEach(wrapper => {
wrapper.style.backgroundColor = currentBackground;
});
});
}
function getContainers() {
innerElements = parent.document.querySelectorAll('div[class^="fixed-container-"]');
return Array.from(innerElements).map(el => el.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
}
function checkForBackgroundColorChange() {
const currentBackgroundColor = window.getComputedStyle(root).backgroundColor;
if (currentBackgroundColor !== lastBackgroundColor) {
lastBackgroundColor = currentBackgroundColor; // Update the last known value
updateContainerBackground(lastBackgroundColor);
}
}
const observerCallback = (mutationsList, observer) => {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes' && (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
checkForBackgroundColorChange();
}
}
};
const main = () => {
checkForBackgroundColorChange();
const observer = new MutationObserver(observerCallback);
observer.observe(root, { attributes: true, childList: false, subtree: false });
}
main();
""".strip()
MARGINS = {
"top": "2.875rem",
"bottom": "0",
}
counter = 0
def st_fixed_container(
*,
height: int | None = None,
border: bool | None = None,
mode: Literal["fixed", "sticky"] = "fixed",
position: Literal["top", "bottom"] = "top",
margin: str | None = None,
):
if margin is None:
margin = MARGINS[position]
global counter
fixed_container = st.container()
non_fixed_container = st.container()
css = FIXED_CONTAINER_CSS.format(
mode=mode,
position=position,
margin=margin,
id=counter,
)
container = fixed_container.container(height=height, border=border)
with fixed_container:
html(f"<script>{FIXED_CONTAINER_JS}</script>", scrolling=False, height=0)
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
st.markdown(
f"<div class='fixed-container-{counter}'></div>",
unsafe_allow_html=True,
)
with non_fixed_container:
st.markdown(
f"<div class='not-fixed-container'></div>",
unsafe_allow_html=True,
)
counter += 1
return container
if __name__ == "__main__":
for i in range(30):
st.write(f"Line {i}")
# with st_fixed_container(mode="sticky", position="top", border=True):
# with st_fixed_container(mode="sticky", position="bottom", border=True):
# with st_fixed_container(mode="fixed", position="top", border=True):
with st_fixed_container(mode="fixed", position="bottom", border=True):
st.write("This is a fixed container.")
st.write("This is a fixed container.")
st.write("This is a fixed container.")
st.container(border=True).write("This is a regular container.")
for i in range(30):
st.write(f"Line {i}")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment