Change font size of multiselect elements

🎈 Using Streamlit
1

Summary

I want to change (reduce) the font size of the multiselect elements . One of the multiselect box displays Full Name of people, and showing all 15 of those (when all are selected) consumes a lot of space of the sidebar.

Below is the code I use to define the sidebar. I would also like to specify the fontsize of its elements.

Code snippet:

AD = st.sidebar.multiselect(
    "Select the AD:",
    options=df_dept_io["Owner"].unique(),
    default=df_dept_io['Owner'].unique()
)

streamlit_sidebar
streamlit_sidebar688×574 34 KB

2

Hey @salihhh,

Thanks for sharing this question! Unfortunately, adjusting the font size isn’t supported natively, so your best bet would be adding CSS to the app via st.markdown – check out the following resources:

3

Thanks Caroline!

I’m afraid the css styling hack provided in the @dataprocessor’s video works fully only the body section.

For the navigation bar, the font size never changes, although the background etc can be changed.

Is there any way we can change the font size for particular elements in the navigation bar (multiselect elements, multiselect header etc)

I think this will be a blocker for me as the elements may consume the whole area of the bar as more usernames are listed. I really need to figure it out :slight_smile:

4

Hi @Caroline,

Do you know if we can use the function format_func of st.multiselect to change font size ?

5

Components API would solve this issue. See this discussion for an example implementation. Just make sure to convert the numpy array to a json array in order to perform the includes() check.