Sidebar: vertically aligned buttons

[pierrelouisbescond]

Hi Streamliters!

I’m working on a project to add the chat history functionality in Streamlit chat (that I will share with the community as I did for some other projects).

I’m struggling with the layout to have the two buttons (the one loading the past conversation and the one to remove it from history)… I made some tests with containers and columns, without luck:

Any suggestion to help me achieve this? (the corresponding code is below):

import streamlit as st

st.sidebar.write("Menu Options")

st.sidebar.markdown("***")

history = [f"Past Conversation {i}" for i in range(1, 6)]

for key, conversation in enumerate(history):
    st.sidebar.button(conversation)
    st.sidebar.button("❌", key)

st.header("App Title")

Thanks

[Shawn_Pereira]

Hi @pierrelouisbescond

Try this code and see if it works for you:

import streamlit as st

st.sidebar.write("Menu Options")

st.sidebar.markdown("***")

history = [f"Past Conversation {i}" for i in range(1, 6)]

sc1, sc2 = st.sidebar.columns((2,1))
for vkey, conversation in enumerate(history):
  sc1.button(conversation, key=f'c{vkey}')
  sc2.button("❌", key=f'b{vkey}')

st.header("App Title")

Cheers

[pierrelouisbescond]

@Shawn_Pereira

import streamlit as st

st.sidebar.write("Menu Options")

st.sidebar.markdown("***")

history = [f"Past Conversation {i}" for i in range(1, 6)]

sc1, sc2 = st.sidebar.columns((2,1))
for vkey, conversation in enumerate(history):
  sc1.button(conversation, key=f'c{vkey}')
  sc2.button("❌", key=f'b{vkey}')

st.header("App Title")

Awesomely awesome! Thanks a lot @Shawn_Pereira