georad commited on
Commit
6fa67d7
·
verified ·
1 Parent(s): d98a4da

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +32 -25
app.py CHANGED
@@ -6,41 +6,48 @@ header_container = st.container()
6
  # Create a separate container for the main content
7
  main_container = st.container()
8
 
9
- # Set up a custom CSS using st.markdown for the containers
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  st.markdown("""
11
  <style>
12
- div[data-testid="stVerticalBlock"] > div:nth-child(1) {
 
 
13
  position: sticky;
14
- top: 0;
15
- background-color: white;
16
- z-index: 999;
17
  padding: 1rem;
18
- border-bottom: 1px solid #f0f0f0;
 
19
  }
20
- /* Adjust main content padding */
21
- div[data-testid="stVerticalBlock"] > div:nth-child(2) {
22
- padding-top: 1rem;
 
23
  }
24
- /* Hide default Streamlit header if desired */
25
- header {visibility: hidden;}
26
  </style>
27
  """, unsafe_allow_html=True)
28
 
29
- # Add content to the sticky header container
30
- with header_container:
31
- st.title("My App with Sticky Header")
32
- # Add any other header elements here
33
- st.markdown("---") # Optional divider
34
-
35
- # Add content to the main container
36
- with main_container:
37
- # Your main app content goes here
38
- st.write("Main content starts here")
39
-
40
- # Add some sample content to demonstrate scrolling
41
- for i in range(20):
42
- st.write(f"Content line {i}")
43
 
 
 
 
44
 
45
 
46
 
 
6
  # Create a separate container for the main content
7
  main_container = st.container()
8
 
9
+ # Reset any previous custom styles
10
+ st.set_page_config(page_title="My App", layout="wide")
11
+
12
+ # Your app content starts here
13
+ st.title("My App Title")
14
+
15
+ # Create a custom header with container
16
+ header = st.container()
17
+ with header:
18
+ col1, col2 = st.columns([3, 1])
19
+ with col1:
20
+ st.subheader("Custom Sticky Navigation")
21
+ with col2:
22
+ st.button("Button 1")
23
+
24
+ # Add minimal CSS that won't interfere with status toolbar
25
  st.markdown("""
26
  <style>
27
+ /* Target only our specific header container */
28
+ [data-testid="stContainer"]:first-child {
29
+ position: -webkit-sticky;
30
  position: sticky;
31
+ top: 0px;
32
+ background-color: #f0f5f5;
 
33
  padding: 1rem;
34
+ z-index: 50;
35
+ border-bottom: 1px solid #ddd;
36
  }
37
+
38
+ /* Ensure this doesn't affect other containers */
39
+ [data-testid="stContainer"]:not(:first-child) {
40
+ margin-top: 1rem;
41
  }
 
 
42
  </style>
43
  """, unsafe_allow_html=True)
44
 
45
+ # Main content area
46
+ st.write("Main content starts here")
 
 
 
 
 
 
 
 
 
 
 
 
47
 
48
+ # Add sample content to demonstrate scrolling
49
+ for i in range(30):
50
+ st.write(f"Content line {i}")
51
 
52
 
53