Issues with Background Colour for buttons

mathcatsand · April 17, 2023, 9:10pm

The widget key is not accessible on the front end, so you can’t do that directly. You would need to use the context of other items around your buttons, or possible nth-of-type selectors to pick out your buttons…which becomes very dependent on your exact code and situation.

Here’s an example of using nth-of-type to “grab” different areas of the app to apply formatting.
https://mathcatsand-examples.streamlit.app/formatted_container

github.com

MathCatsAnd/Streamlit-Mechanics-Examples/blob/main/pages/formatted_container.py

import streamlit as st
import time

NUM_CONTAINERS = 4

if 'side_state' not in st.session_state or 'state' not in st.session_state:
    st.session_state.side_state = [False]*NUM_CONTAINERS
    st.session_state.state = [False]*NUM_CONTAINERS

# collapse ith (indexed by 0) container; expand (i+1)th container if not already expanded
def next (i, where):
    if where =='body':
        script = f'''
        <script>
            let container = parent.document.querySelector("section.main > div > div > div > div:nth-of-type({i+1}) > div [data-testid='stExpander'] ul li div");
            container.click()   
            let next = parent.document.querySelector("section.main > div > div > div > div:nth-of-type({i+2}) > div [data-testid='stExpander'] ul li [aria-expanded='false']");
            if (!(next === null)) {{
                next.click()
            }}

This file has been truncated. show original

Feel free to create a new thread with your code if you need help applying the concept.

Topic		Replies	Views
Create 2 different buttons with different styles 🎈 Using Streamlit css	7	4277	September 18, 2023
How to change the backgorund color of button widget 🎈 Using Streamlit	41	42639	April 18, 2024
Changing Button Color 🎈 Using Streamlit css	5	7549	May 13, 2022
Error when customize button style to use image as a background 🎈 Using Streamlit	9	637	January 3, 2024
How to set the backgroud for a streamlit web program? 🎈 Using Streamlit windows	5	1412	May 13, 2022

Issues with Background Colour for buttons

Related Topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies