Modifying the font size of a st.expander label

[doug2023]

How can I modify the font size of a st.expander label?

expander = st.expander(label="Targets: ", expanded=True)
with expander:
     st.markdown("""

[Shawn_Pereira]

Hi @doug2023 , see if you can use the logic from here for your purpose:

How to change font size of streamlit radio widget title?

Hi @arnaud, The way you suggest will result in all the radio widgets on the page having the font size as 32px. What if you wanted to: target just 1 radio widget from among all the radio widgets on the page? not bother about inspecting the css classes, which may change with time / streamlit versions? With the following way, I can target any widget, (even add multiple style attributes as function parameters) import streamlit as st import streamlit.components.v1 as components st.set_page_con…

Cheers

[doug2023]

Would be the var htmlstr used for change the st.expander label font size? I’m sorry but I don’t understand!

[Shawn_Pereira]

JS code is created and stored in the htmlstr variable. It is then fed into components.html to be run.

The JS code iterates through the document elements to search for the one which has the label that matches the text you pass as a function parameter, and then changes its font size.

Hope this is understandable.

Cheers

Blockquote

[doug2023]

Amazing!!! It really worked!

[doug2023]

I don’t want to abuse your generosity, but is this script used to change the size of the wigdet, in this case the expander or something similar? And I’m new coding. I’ve been learning and testing. And I really liked Streamlit for show data analysis.

[Shawn_Pereira]

Hi @doug2023,

For most widgets, the above code could work. For others, you could try the logic from one of my previous responses:

Font size of slider caption

Hi @zxdawn, If you use the css hack, it will apply to all the elements of the same type, that exist on the page. I modified the code slightly, but this won’t work if you use emojis. If you are still interested, the code is below, along with a snapshot: import streamlit as st import streamlit.components.v1 as components def ChangeWidgetFontSize(wgt_txt, wch_font_size = '12px'): htmlstr = """<script>var elements = window.parent.document.querySelectorAll('p'), i; for (i = 0;…

Give it a shot and try and figure it out - that’s how I learnt.

Cheers