Increase expander's label text size

Hi all,

I’ve this expander here where inside I display a column (arbitrarily, so the column displayed is always known)

I’d like to change the label of the expander, not only with the column’s name [resolved] but I’d like to change the font style and make it bigger and “nicer”.
Or also what could be fine for me is to have a workaround to display nothing in the label’s field (at the moment seems not to be possible) and to use the standard subheader or something.

Is there any way to do that? I’ve already tried the method that has been already adviced here in the forum but it’s not working.
I’m ok in injecting html code but I can’t figure how to do that.

Thank you :slight_smile:

Regards,
Lorenzo

Hi @lollovela,

Thanks for posting! Please be more specific in describing what you’ve tried and how it didn’t work; you mentioned “I’ve already tried the method that has been already adviced here in the forum but it’s not working.” – can you share a code snippet to show what you already tried?

From St.expander : increase size of the label - #2 by Shawn_Pereira

1 Like

Hi @lollovela you’ll need some css hacking :slight_smile:

Assuming that you will create external css file called style.css

streamlit app:

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

local_css("style.css")

with st.expander("label"):
    st.write("text")
    st.write("text")
    st.write("text")

style.css

div[data-testid="stExpander"] div[role="button"] p {
    font-size: 4rem;
}

Effect:

2 Likes

It works perfectly! Thank you so much.

Components API seems to solve this issue most flexibly. See this discussion for an example implementation.

Does this method not work anymore? I updated Streamlit and my CSS changes to the expander stopped working.

How about

div[data-testid="stExpander"] details summary p{
    font-size: 4rem;
}

That works! Do you know if that would work for older Streamlit versions as well?

Not for versions older than 1.28.0. Expanders rendered as <details> sections were introduced in that release.

For details: https://github.com/streamlit/streamlit/pull/7247