I utilized the insights from this post to craft multiple buttons in Streamlit: HOW TO STYLE A BUTTON IN STREAMLIT. The outcome appears as follows: enter image description here The code that I implemented is:
def style_button(click_button_i, nb_buttons):
def get_button_indices(button_i):
return {
'nth_child': button_i,
'nth_last_child': nb_buttons - button_i + 1
}
click_style = """
div[data-testid*="stHorizontalBlock"] > div:nth-child(%(nth_child)s):nth-last-child(%(nth_last_child)s) button {
border-color: rgb(50,205,50);
color: rgb(50,205,50);
box-shadow: rgba(50,205,50, 0.5) 0px 0px 0px 0.2rem;
outline: currentcolor none medium;
}
"""
unclick_style = """
div[data-testid*="stHorizontalBlock"] > div:nth-child(%(nth_child)s):nth-last-child(%(nth_last_child)s) button {
pointer-events: none;
cursor: not-allowed;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
"""
style = ""
for i in range(nb_buttons):
i += 1
if i == click_button_i:
style += click_style % get_button_indices(i)
else:
style += unclick_style % get_button_indices(i)
st.markdown(f"<style>{style}</style>", unsafe_allow_html=True)
and:
st.subheader("Is this the correct answer?")
col1, col2= st.columns([1,1])
with col1:
st.button("YES", on_click=style_button, key= "a",kwargs={
'click_button_i': 1, 'nb_buttons': 2
})
with col2:
st.button("NO", on_click=style_button, key="b",kwargs={
'click_button_i': 2, 'nb_buttons': 2
})
st.subheader("Additional content...")
st.subheader("Is this a valid response?")
col1, col2= st.columns([1,1])
with col1:
st.button("YES", on_click=style_button, key= "c",kwargs={
'click_button_i': 1, 'nb_buttons': 2
})
with col2:
st.button("NO", on_click=style_button, key="d",kwargs={
'click_button_i': 2, 'nb_buttons': 2
})
Upon clicking a button (e.g., YES), all other YES buttons are automatically chosen and stay green without individual interaction.
My query pertains to creating multiple rows of independent buttons. Is it feasible?
I experimented with altering the number of buttons in st.button, I tried defining a style_button2, yet it seems that the beacon for st.buttons is consistent across all instances. Perhaps modifications within the nth_child aspect are required, but CSS intricacies escape me.
Thank you for your feedback!