File size: 2,817 Bytes
d8f56b1 53dcb25 e7f3391 20402fe fb22e4f e7f3391 20402fe 8918a49 e7f3391 20402fe e7f3391 20402fe e7f3391 20402fe 04c7b8c e7f3391 8918a49 e7f3391 37aa3eb 3a82c15 5c61a4a 3a82c15 5c61a4a 3a82c15 9038e9e dbb0d31 fb22e4f 903376c fb22e4f dbb0d31 057e688 fb22e4f 04c7b8c 73e19aa |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import streamlit as st
# Custom CSS to ensure sticky header in both Streamlit and Hugging Face environments
st.markdown("""
<style>
/* Target both Streamlit native and Hugging Face iframe embedding */
/* Make the header sticky */
header[data-testid="stHeader"] {
position: fixed;
top: 0;
left: 0;
right: 0;
height: auto;
z-index: 999990;
background-color: white;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
/* For Hugging Face specific iframe handling */
section.main {
padding-top: 70px;
}
/* Ensure content doesn't get hidden under the header */
.block-container {
padding-top: 1rem;
}
/* Fix for Hugging Face iframe specific issues */
iframe body .stApp {
padding-top: 3rem;
}
/* Alternative approach: Create your own sticky header container */
div.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999;
background-color: white;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
/* Ensures content below isn't hidden */
margin-bottom: 3rem;
}
/* Create space below custom sticky header */
div.sticky-header-spacer {
height: 6rem;
}
</style>
""", unsafe_allow_html=True)
# Option 1: Using Streamlit's native header (modified with CSS above)
st.title("My App with Sticky Header")
# Option 2: Custom sticky header implementation
# Uncomment and use this approach if the CSS-only solution doesn't work
# Custom sticky header container
st.markdown('<div class="sticky-header">', unsafe_allow_html=True)
st.title("My App with Custom Sticky Header")
# Add any other header elements here
st.markdown('</div>', unsafe_allow_html=True)
# Add spacer to ensure content isn't hidden under the header
st.markdown('<div class="sticky-header-spacer"></div>', unsafe_allow_html=True)
# Rest of your app
st.write("Scroll down to test the sticky header")
# Add dummy content to enable scrolling
for i in range(30):
st.write(f"Content block {i}")
st.write("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
# --- Your Streamlit App ---
#st.logo(image="images/menu_book_60dp_75FBFD.png")
st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
st.subheader("Select specific Chapter for quicker results")
st.logo(image="images/menu_book_60dp_75FBFD.png")
st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(work in progress)")
st.sidebar.text("Demo by JA-RAD")
# --- 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() |