st_invisible_container

st_invisible_container.py

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.")