File size: 2,976 Bytes
d8f56b1 53dcb25 37aa3eb 336be92 37aa3eb 17de2f4 241e0b7 b697118 37aa3eb c97cfa7 37aa3eb 6e19f26 5888d89 37aa3eb 1c82550 37aa3eb 634ab03 b0c81c3 37aa3eb e137e83 37aa3eb e137e83 d68eb9f 336be92 d68eb9f 37aa3eb b50938f 9038e9e b47a09c 9038e9e 057e688 957d115 057e688 fe5cb7d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import streamlit as st
import time
# Inspect the header element, go to the "Computed" tab in styles, and find its height.
HEADER_HEIGHT = "60px" # EXAMPLE: Adjust this (e.g., "56px", "4rem")
HEADER_SELECTOR = 'header[data-testid="stHeader"]'
# ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
# This targets the first direct div child of the stAppViewContainer,
# which often holds the main scrollable content.
MAIN_CONTENT_SELECTOR = 'section[data-testid="stApp"]'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"] > div:nth-child(1)'
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] > div:nth-child(1)'
# Alternative if the above doesn't work or if your content is further nested:
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .main-content-wrapper-class'
# Or, very commonly, Streamlit wraps main content in a div with class "block-container":
#MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .block-container'
#MAIN_CONTENT_SELECTOR = '.main .block-container' # A more general selector for block-container
custom_css = f"""
<style>
/* Making the Streamlit header sticky */
{HEADER_SELECTOR} {{
position: -webkit-sticky !important; /* For Safari */
position: sticky !important;
top: 0 !important;
z-index: 9999 !important; /* Very high z-index */
background-color: #90EE90 !important; /* Or your app's header background color */
/* Add a subtle shadow to make it feel more distinct when content scrolls under */
/* box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); */
}}
/* Adding padding to the main content area to prevent overlap with the sticky header */
{MAIN_CONTENT_SELECTOR} {{
padding-top: {HEADER_HEIGHT} !important;
background-color: yellow !important;
border-style: solid !important;
border-color: red !important;
}}
/* Optional: If your app is set to wide mode and the header isn't spanning full width */
/* This might be needed if the sticky positioning affects its width calculation. */
/*
#{HEADER_SELECTOR} {{
# width: 100% !important;
#}}
#*/
</style>
"""
# Inject CSS as early as possible in your app
st.markdown(custom_css, unsafe_allow_html=True)
# --- Your Streamlit App ---
st.logo(image="images/menu_book_60dp_75FBFD.png")
#st.title("SBS V2.0 mapper")
st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(work in progress)")
st.sidebar.text("Demo by JA-RAD")
# --- PAGE SETUP ---
type_text_page = st.Page(
page="pages/type_text.py",
title="DEMO (work in progress)",
icon=":material/keyboard:",
default=True,)
# --- NAVIGATION SETUP ---
pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
#pg = st.navigation({"Chapter_Index": [start_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS
pg.run() |