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.
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)
Most of the formatting that you can do with Markdown can be passed to the header of the st.expander: colors, bold, italics, etc.
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)