I’m developing a Streamlit app and need help fixing the st.file_uploader() at the bottom of the page, alongside a chat input (st.chat_input()). While the chat input stays fixed at the bottom, the image upload option scrolls with the page.
How can I make the st.file_uploader() stay fixed at the bottom, just like the chat input? Any suggestions?
Image 1
A hackish approach that works for all Streamlit elements is to use st.html.
You can manipulate <style> of this element to ensure that it’s anchored to the bottom of the page always.
Another plausible approach here can be - To inject this element inside the footer container. This also includes manipulating elements by injecting js script inside st.html.
I have been using this approach for manipulate placement of streamlit elements for about 2 years now and happy to share that this approach works very stably.
Do share your thoughts and results here. 
st.chat_input is a bit especial because it is placed by default in st._bottom. You can access that container the same way you’d add elements to st.sidebar, for example:
import streamlit as st
st.title(":cat:")
st.write("Some repeated text. " * 50)
with st._bottom:
left_col, right_col = st.columns(2)
with left_col:
st.subheader("Hello chat:")
chat = st.chat_input("Type here your question...")
with right_col:
uploaded_file = st.file_uploader("Upload a file")
The only downside is that the main content in the page will automatically scroll all the way down, which would be useful to display a chat history, but not much else. st._bottom is not officially supported so it’s not in the docs but it can be found in the source code.
Also, related, file inputs in st.chat_input is in development:
You can now include a file uploader inside st.chat_input with the accept_file parameter (Version 1.43.0).
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.