Streamlit Version: 1.42.0
Python: 3.12-slim
Hi Streamlit Community,
I’m encountering a visual bug with the new dataframe column menu options (sort and pin) introduced in Streamlit 1.42.0. The text for the menu items is being overlaid with what appears to be the icon names or internal identifiers.
Instead of seeing:
- Sort ascending
- Sort descending
- Pin column
I’m seeing something like:
- arrow_upwardSort ascending
- arrow_downwardSort descending
- keepPin column
Here is the image of the issue:
The extra text (arrow_upward, arrow_downward, keep) is making the menu difficult to read. This happens consistently whenever I click the three-dot menu icon on any dataframe column.
I have a custom HTML structure wrapping my Streamlit application. I suspect this might be related to the issue, although I’m not certain. Here’s the basic structure:
import streamlit as st
# Top of the application
st.markdown('<div class="main-content">', unsafe_allow_html=True)
top_bar_fixed() # Function to create a fixed top bar
# [... application ...]
# Bottom of the application
st.markdown('</div>', unsafe_allow_html=True) # Close the main content div
The top_bar_fixed() function injects custom CSS and HTML for a fixed navigation bar. Here’s the code for that function:
import streamlit as st
from utils.criptografia import descriptografar
import base64
import os
from utils.logs import log_user_action, log_error
from utils.tipos_acao_logs import LOGOUT
def get_image_base64(image_path):
if not os.path.exists(image_path):
return ""
with open(image_path, "rb") as img_file:
return base64.b64encode(img_file.read()).decode()
def top_bar_fixed():
logo_base64 = get_image_base64('imgs/fiscdados-logo.png')
seta_baixo_base64 = get_image_base64('imgs/baixo-icone.png')
st.markdown(
f"""
<style>
/* (Your CSS styles from the provided code) */
.top-bar {{ /* ... */ }}
.top-bar .left-section, .top-bar .right-section {{ /* ... */ }}
/* ... (rest of your CSS) ... */
.username {{ /* ... */ }}
</style>
""",
unsafe_allow_html=True
)
username_descripto = ""
if st.session_state.get('logged_in'):
if "nome_completo_usuario_logado" in st.session_state:
username_descripto = st.session_state.nome_completo_usuario_logado
elif "username" in st.session_state:
try:
username_descripto = descriptografar(st.session_state.username)
except Exception as e:
username_descripto = "User"
st.error(f"Error decrypting username: {e}")
if st.session_state.get('logged_in'):
top_bar_html = f"""
<div class="top-bar">
<!-- ... (HTML for logged-in users) ... -->
</div>
"""
else:
top_bar_html = f"""
<div class="top-bar">
<!-- ... (HTML for logged-out users) ... -->
</div>
"""
st.markdown(top_bar_html, unsafe_allow_html=True)
Here’s a simplified example of how I’m displaying a dataframe:
import streamlit as st
import pandas as pd
data = {'col1': [1, 2, 3], 'col2': [4, 5, 6]}
df = pd.DataFrame(data)
st.dataframe(df)
Inspected Element (Browser):
I inspected the problematic menu element in my browser’s developer tools. Here’s the relevant HTML:
<div class="st-emotion-cache-1czn7q6 eau1w2s1">
<div role="menuitem" class="st-emotion-cache-1skfxnm eau1w2s2">
<span color="inherit" class="st-emotion-cache-8ttvjt e1fexwmo2">
<span color="inherit" data-testid="stIconMaterial" translate="no" class="st-emotion-cache-25nyg5 ejhh0er0">arrow_upward</span>
</span>Sort ascending
</div>
<div role="menuitem" class="st-emotion-cache-1skfxnm eau1w2s2">
<span color="inherit" class="st-emotion-cache-8ttvjt e1fexwmo2">
<span color="inherit" data-testid="stIconMaterial" translate="no" class="st-emotion-cache-25nyg5 ejhh0er0">arrow_downward</span>
</span>Sort descending
</div>
<div class="st-emotion-cache-1jri120 eau1w2s3"></div>
<div class="st-emotion-cache-1skfxnm eau1w2s2">
<span color="inherit" class="st-emotion-cache-8ttvjt e1fexwmo2">
<span color="inherit" data-testid="stIconMaterial" translate="no" class="st-emotion-cache-25nyg5 ejhh0er0">keep</span>
</span>Pin column
</div>
</div>