Skip to content

Instantly share code, notes, and snippets.

@toolittlecakes
Created August 18, 2024 12:34
Show Gist options
  • Save toolittlecakes/18fc5be91d3c9f028bebad98355827e1 to your computer and use it in GitHub Desktop.
Save toolittlecakes/18fc5be91d3c9f028bebad98355827e1 to your computer and use it in GitHub Desktop.
st_invisible_container
from typing import Literal
import streamlit as st
from streamlit.components.v1 import html
INVISIBLE_CONTAINER_CSS = """
div[data-testid="stVerticalBlockBorderWrapper"]:has(div.invisible-marker-container):not(:has(div.not-invisible-marker-container)) {
display: none;
}
div[data-testid="stVerticalBlockBorderWrapper"]:not(:has(div.invisible-marker-container)):has(div.not-invisible-marker-container) {
display: none;
}
"""
def st_invisible_container():
invisible_marker_container = st.container()
not_invisible_marker_container = st.container()
css = INVISIBLE_CONTAINER_CSS
with invisible_marker_container:
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
st.markdown(
"<div class='invisible-marker-container'></div>",
unsafe_allow_html=True,
)
with not_invisible_marker_container:
st.markdown(
f"<div class='not-invisible-marker-container'></div>",
unsafe_allow_html=True,
)
return invisible_marker_container.container()
if __name__ == "__main__":
for i in range(10):
st.write(f"Line {i}")
# with invisible_container(mode="sticky", position="top", border=True):
# with invisible_container(mode="sticky", position="bottom", border=True):
# with invisible_container(mode="fixed", position="top", border=True):
with st.container(border=True):
st.write("This is a regular container.")
st.container()
st.write("This is a regular container.")
with st_invisible_container():
st.write("This is a regular container.")
st.write("This is a regular container.")
st.write("This is a regular container.")
st.write("This is a regular container.")
for i in range(10):
st.write(f"Line {i}")
st.container(border=True).write("This is a regular container.")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment