Button inside column: Only one button output displayed at a time

🎈 Using Streamlit
1

I am not able to create columns with buttons, where all button output is shown simultanously. The below code shows my problem.

import streamlit as st

col1, col2 = st.columns(2)

with col1:
    runButton = st.button("Perform calculation 1")
    if runButton:
        st.subheader("1")

with col2:
    runButton = st.button("Perform calculation 2")
    if runButton:
        st.subheader("2")

When button1 is clicked, output for button 1 is displayed. But when I then click on button 2, the output from button 1 dissapears.

2

Hi @kaaja, the possible solution is to add on_click to the buttons. Code:

import streamlit as st

col1, col2 = st.columns(2)
if 'clicked' not in st.session_state:
       st.session_state.clicked = False
def a():
       st.session_state.clicked = not st.session_state.clicked
with col1:
    runButton = st.button("Perform calculation 1",on_click=a)
    if st.session_state.clicked is True:
        st.subheader("1")

with col2:
    runButton = st.button("Perform calculation 2",on_click=a)
    if st.session_state.clicked:
        st.subheader("2")

I would have added the video of working of the code but I don’t know how to do that. So basically in the code when ever the runbutton is clicked the status changes and based on it the statements under the if condition gets executed. Screen snips:

image
image844×236 3.04 KB

:point_up_2: in this I have selected the button in Column 1 and the values appear in both the columns.
image
:point_up_2: in this I have selected the button in Column 2 and the values appear in both the columns.

Hope this helps :v:.

3

Hi @VishnuS-S,

I think your suggestion is one step closer to what I am looking for.
I want the two columns to be completely independent, with the following properties:

  1. Click only on button 1: Result only for column 1.
  2. Click only on button 2: Result only for column 2.
  3. Click button 2 after button 1: Result for column 1 first, then also for column 2.
  4. Click button 1 after button 2: Result for column 2 first, then also for column 1.
4

Oh, I see.The properties gave me a better understanding. Then this will work:

import streamlit as st

col1, col2 = st.columns(2)
if 'clickedc1' not in st.session_state:
       st.session_state.clickedc1 = False
       st.session_state.clickedc2 = False
def a():
       st.session_state.clickedc1 = not st.session_state.clickedc1
def b():
       st.session_state.clickedc2 = not st.session_state.clickedc2
with col1:
    runButton = st.button("Perform calculation 1",on_click=a)
    if st.session_state.clickedc1 is True:
        st.subheader("1")

with col2:
    runButton = st.button("Perform calculation 2",on_click=b)
    if st.session_state.clickedc2:
        st.subheader("2")

This should do it.

5

Yes! Thanks a lot @VishnuS-S!

1 Like
6

I should maube ask a new quesiton, but since this one is related to the previous case, I ask it here.
Is it possible to get the number of clicks in each column?
My try below does not acheive this:

import streamlit as st

col1, col2 = st.columns(2)
if 'clickedc1' not in st.session_state:
        st.session_state.clickedc1 = False
        st.session_state.clickedc2 = False
def a():
        st.session_state.clickedc1 = not st.session_state.clickedc1

def b():
        st.session_state.clickedc2 = not st.session_state.clickedc2
        
counter1 = 0
counter2 = 0
with col1:
    runButton = st.button("Perform calculation 1",on_click=a)
    if st.session_state.clickedc1 is True:
        counter1 += 1
        st.text(counter1)

with col2:
    runButton = st.button("Perform calculation 2",on_click=b)
    if st.session_state.clickedc2:
        counter2 += 1
        st.text(counter2)
7

I think you have to put the counter variable incrementation in functions a and b respectively. Give it a try and let me know how it goes.

8

Hi @VishnuS-S,

The following is not so elegant, but seems to work

import streamlit as st

col1, col2 = st.columns(2)
if 'clickedc1' not in st.session_state:
        st.session_state.clickedc1 = False
        st.session_state.clickedc2 = False
if 'count1' not in st.session_state:
    st.session_state.count1= 0
    st.session_state.count2= 0
    
def a():
        st.session_state.clickedc1 = not st.session_state.clickedc1
        st.session_state.count1 += 0.5
        

def b():
        st.session_state.clickedc2 = not st.session_state.clickedc2
        st.session_state.count2 += 0.5
        
with col1:
    runButton = st.button("Perform calculation 1", on_click=a)
    if st.session_state.clickedc1:
        st.text(st.session_state.count1 )

with col2:
    runButton = st.button("Perform calculation 2", on_click=b)
    if st.session_state.clickedc2:
        st.text(st.session_state.count2)

Do you know how I could avoid using the 0.5 increments?

9

Changes in functions a and b:

st.session_state.clickedc1 = True
st.session_state.count1 += 1

Do similarly for def b.

10

That was it. Thanks, @VishnuS-S!

1 Like