georad commited on
Commit
9b54e61
·
verified ·
1 Parent(s): e521abb

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +45 -4
app.py CHANGED
@@ -1,12 +1,52 @@
1
  import streamlit as st
2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  # Inspect the header element, go to the "Computed" tab in styles, and find its height.
4
- HEADER_HEIGHT = "60px" # EXAMPLE: Adjust this (e.g., "56px", "4rem")
5
- HEADER_SELECTOR = 'header[data-testid="stHeader"]'
6
 
7
  # ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
8
  # Target the first direct div child of the stAppViewContainer which often holds the main scrollable content
9
- MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
10
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"] > div:nth-child(1)'
11
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stMainBlockContainer"]'
12
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"]'
@@ -16,7 +56,7 @@ MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
16
  # Or, very commonly, Streamlit wraps main content in a div with class "block-container":
17
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .block-container'
18
  #MAIN_CONTENT_SELECTOR = '.main .block-container' # A more general selector for block-container
19
-
20
  custom_css = f"""
21
  <style>
22
  /* Making the Streamlit header sticky */
@@ -50,6 +90,7 @@ custom_css = f"""
50
  #*/
51
  </style>
52
  """
 
53
 
54
  # Inject CSS as early as possible in your app
55
  st.markdown(custom_css, unsafe_allow_html=True)
 
1
  import streamlit as st
2
 
3
+ # At the top of your existing file with your imports
4
+
5
+ def add_sticky_header_css():
6
+ st.markdown("""
7
+ <style>
8
+ /* Make Streamlit's toolbar sticky */
9
+ [data-testid="stToolbar"] {
10
+ position: fixed;
11
+ top: 0;
12
+ right: 0;
13
+ z-index: 1000;
14
+ width: 100%;
15
+ background-color: white;
16
+ }
17
+
18
+ /* Make Streamlit's status widget sticky */
19
+ [data-testid="stStatusWidget"] {
20
+ position: fixed;
21
+ bottom: 0;
22
+ right: 0;
23
+ z-index: 1000;
24
+ background-color: white;
25
+ padding: 5px;
26
+ border-top: 1px solid #f0f0f0;
27
+ width: 100%;
28
+ }
29
+
30
+ /* Add padding to main content to prevent overlap with fixed header */
31
+ .main .block-container {
32
+ padding-top: 5rem;
33
+ padding-bottom: 3rem;
34
+ }
35
+ </style>
36
+ """, unsafe_allow_html=True)
37
+
38
+ # Then at the start of your main function or execution flow
39
+ add_sticky_header_css()
40
+
41
+ # Rest of your existing app continues...
42
+
43
  # Inspect the header element, go to the "Computed" tab in styles, and find its height.
44
+ #HEADER_HEIGHT = "60px" # EXAMPLE: Adjust this (e.g., "56px", "4rem")
45
+ #HEADER_SELECTOR = 'header[data-testid="stHeader"]'
46
 
47
  # ---- SELECTOR FOR THE MAIN CONTENT AREA THAT NEEDS PADDING ----
48
  # Target the first direct div child of the stAppViewContainer which often holds the main scrollable content
49
+ #MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"]'
50
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stMain"] > div:nth-child(1)'
51
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stMainBlockContainer"]'
52
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"]'
 
56
  # Or, very commonly, Streamlit wraps main content in a div with class "block-container":
57
  #MAIN_CONTENT_SELECTOR = 'section[data-testid="stAppViewContainer"] .block-container'
58
  #MAIN_CONTENT_SELECTOR = '.main .block-container' # A more general selector for block-container
59
+ '''
60
  custom_css = f"""
61
  <style>
62
  /* Making the Streamlit header sticky */
 
90
  #*/
91
  </style>
92
  """
93
+ '''
94
 
95
  # Inject CSS as early as possible in your app
96
  st.markdown(custom_css, unsafe_allow_html=True)