Increase expander's label text size and style on hover

Using Streamlit
1

Hi all,

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

image
image1284×189 5.97 KB

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

1 Like
2

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?

3

image
image875×434 48.6 KB

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

1 Like
4

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:

image
image1236×555 4.34 KB

2 Likes
How to styled st.expander in streamlit and python based on value
5

It works perfectly! Thank you so much.

6

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

7

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

1 Like
8

How about

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

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

10

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

11

Is it possible to use a similar method to change the color of the expander when you hover over it? Or is that controlled somewhere else?

12

Yeah, for instance:

expander_hover

[data-testid="stExpander"] details:hover summary{
    background-color: rgba(228, 0, 124, 0.1);
}

Check other stuff that you could tinker with in the <details> html element: <details>: The Details disclosure element - HTML: HyperText Markup Language | MDN

3 Likes
13

Would it be easy to apply the style only to certain expanders?

14

Yes, by assigning a key to a st.container that wraps the st.expander you want to target.

image
image1457×509 19.2 KB

import streamlit as st

st.html(
    """ 
    <style>
        div.st-key-my_custom_expander [data-testid=stExpander] details:hover summary{
            background-color: rgba(0, 100, 0, 0.3);
        }

        div.st-key-my_custom_expander [data-testid=stExpander] details:hover summary p{
            font-weight: bolder;
        }
    </style>
    """
)

with st.container(key="my_custom_expander"):
    with st.expander("Modified style expander"):
        st.subheader("Hello 1")

with st.expander("Default style"):
    st.subheader("Hello 2")
1 Like