How to place streamlit button next to chat_input at bottom of page

[jonnguyens]

If you’re creating a debugging post, please include the following info:

1. Are you running your app locally or is it deployed? LOCAL
2. Share the Streamlit and Python versions. Python 3.11, Streamlit 1.30

How does one move the button so it is side by side with the chat input down below? I’ve tried as many HTML hacks as I can think of including inline-flex or flex.

[Goyo]

What button do you want to move?

You use columns to put widgets side by side in streamlit.

[jonnguyens]

Hi,

I’ve tried using st.columns, but the issue is getting it to stay at the bottom. One of the requirements is that as the chat_messages are added, it will continue to push the page down. The input + button must stay at the bottom each time and scroll with the page.

The button I am talking about is the purple button with a giant + sign. I can give a code example.

Basically, I want to emulate the natural behavior of chat_input when it is not in a container. If it is not in a container, it sits at the bottom of the screen. I want to pair a button with it. But when I pair a button with it, it overrides the chat_inputs behavior to sit at the bottom.

Any attempts to move it to the bottom results in a “fixed” position where other elements overlap with it.

[Goyo]

I see, I can’t think of any way of doing that.

[jonnguyens]

Yeah, it is very tricky to get this to work. I’ve been trying all sorts of CSS and HTML hacks. The issue is st.chat_input creates a bottom container that is sectioned from the main app. It also adds the data-testid=“ScrollToBottomContainer” tag to the section element that has the chat.

Effectively, it is extremely difficult to pair other elements with the chat_input at the bottom of the screen. Perhaps modifying the st.empty method so that it accepts a parameter to be at the bottom of the screen? I am not sure the best way to go around this.