Hi all I am building a simple web app with streamlit in python. I need to add 3 buttons but they must be on the same line.
Obviously the following code puts them on three different lines
st.button('Button 1')
st.button('Button 2')
st.button('Button 3')
Do you have any tips?
Apparently this should do it
col1, col2, col3 = st.columns([1,1,1])
with col1:
st.button('1')
with col2:
st.button('2')
with col3:
st.button('3')
I had a similar problem - to add an action button to a table. I came to the following approach:
import streamlit as st
# # Show users table
colms = st.columns((1, 2, 2, 1, 1))
fields = ["№", 'email', 'uid', 'verified', "action"]
for col, field_name in zip(colms, fields):
# header
col.write(field_name)
for x, email in enumerate(user_table['email']):
col1, col2, col3, col4, col5 = st.columns((1, 2, 2, 1, 1))
col1.write(x) # index
col2.write(user_table['email'][x]) # email
col3.write(user_table['uid'][x]) # unique ID
col4.write(user_table['verified'][x]) # email status
disable_status = user_table['disabled'][x] # flexible type of button
button_type = "Unblock" if disable_status else "Block"
button_phold = col5.empty() # create a placeholder
do_action = button_phold.button(button_type, key=x)
if do_action:
pass # do some action with row's data
button_phold.empty() # remove button
And it works fine. The object — user_table
— is a dictionary very similar to DataFrame, where each key — is a column (ie list
in pythonic terms). And here how it looks like (Note “Blocked” — that is the result of action):
I fix it with css styling MOZILLA
import streamlit as st
css_code_tree_button_side_by_side= '''
<style>
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div{
display: -webkit-inline-box;
width: 180px;
}
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(-n+3){
width: 50px!important;
}
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(-n+3) > div{
width: 50px!important;
}
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(-n+3) > div > button{
width: fit-content;
}
</style>
'''
st.markdown(css_code_tree_button_side_by_side, unsafe_allow_html=True)
#I know where this 'box' is so I can play with it
with st.container():
if st.button('a'):
pass
if st.button('b'):
pass
if st.button('c'):
pass
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.