Summary
I am curious if there is a way to customize streamlit expander?
Adding styling options like newline, font size and mixing f-string inside the label.
Thanks.
@newbie123 You can always use the st.markdown() for styling. You just need to specify the Streamlit class of the generated elements and you’re good to go.
st.markdown("""
<style>
</style>
""", unsafe_allow_html=True)
1 Like
Most of the formatting that you can do with Markdown can be passed to the header of the st.expander: colors, bold, italics, etc.
Code:
import streamlit as st
value = st.number_input("Value")
text = rf"""
:pencil: **Multiline** expander title _with some_ :violet[color].
:green[Another line here and an equation:]
$$
\sqrt{{x^2+y^2}}=1
$$
Here is an f-string: `{value = :.2f}`.
"""
# text
with st.expander(text, expanded=False):
"Hello from the expander"
Other modifications, like changing the font size, will need to inject some CSS as @IndigoWizard pointed out.
Excellent! Works like a charm. However it seems to ignore # for header size. Is there a way to change the font size?
Sorry, I am not sure what that means. could you enlighten me with a few lines of code example using st.expander and st.markdown?
@newbie123 You can inject custom CSS with st.markdown() the esthetics as follows:
st.markdown("""
<style>
/* Streamlit class name of the div that holds the expander's title*/
.css-q8sbsg p {
font-size: 32px;
color: red;
}
/* Streamlit class name of the div that holds the expander's text*/
.css-nahz7x p {
font-family: bariol;
font-size: 20px;
}
</style>
""", unsafe_allow_html=True)
Before custom CSS
After custom CSS
NOTE:
- You can get the class names of the dives by simply using your browser’s inpsect element.
- Make sure to inject it in the right place, sometimes it’s better to add it after the elment is created (your expander in this case), like at the end of the code and sometimes it’s fine to have it before.
1 Like