St.file_uploader() too big [design and layout]

Note: Just to make sure you know: you can upload multiple files with one widget so be sure to utilize that if appropriate instead of making multiple file uploaders. Keyword accept_multiple_files=True

Otherwise, you can play around with CSS:

import streamlit as st
import pandas as pd

for i in range(10):
    st.file_uploader(f"File uploader {i}")

css = '''
<style>
    [data-testid='stFileUploader'] {
        width: max-content;
    }
    [data-testid='stFileUploader'] section {
        padding: 0;
        float: left;
    }
    [data-testid='stFileUploader'] section > input + div {
        display: none;
    }
    [data-testid='stFileUploader'] section + div {
        float: right;
        padding-top: 0;
    }

</style>
'''

st.markdown(css, unsafe_allow_html=True)

5 Likes