Customizing text in st.expander

🎈 Using Streamlit
1

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.

2

@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)
2 Likes
3

Most of the formatting that you can do with Markdown can be passed to the header of the st.expander: colors, bold, italics, etc.

image
image718×427 14 KB

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.

4

Excellent! Works like a charm. However it seems to ignore # for header size. Is there a way to change the font size?

5

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?

6

@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

image
image750×400 40.5 KB

After custom CSS

image
image750×450 43.9 KB

NOTE:
  1. You can get the class names of the dives by simply using your browser’s inpsect element.
  2. 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