Any way to expand the display width?

Using Streamlit
1

Building my first app, and this seems like it should be an obvious question but I’m not finding much guidance online. There seems to be a lot of free real-estate on my screen that could be used to display information, but the actual display area seems to be a pretty small box. Is there any way to expand this area?

Width Problem
Width Problem2554×678 30.3 KB

Streamlit Code:

import streamlit as st
import pandas as pd

st.title(‘The Ramsey Highlights’)
st.header(‘New Data Collection’)

options = st.sidebar.radio(‘’, [‘All Data’, ‘Link’])

if options == ‘All Data’:
audio_location = st.sidebar.text_input(‘Audio Path:’, r’C:\Users\Samuel\Audio\Audio Full’)
transcript_location = st.sidebar.text_input(‘Transcript Path:’, r’C:\Users\Samuel\Audio\Transcript’)

elif options == ‘Link’:
video_link = st.sidebar.text_input(‘Link:’)
audio_location = st.sidebar.text_input(‘Audio Path:’, r’C:\Users\Samuel\Audio\Audio Full’)
transcript_location = st.sidebar.text_input(‘Transcript Path:’, r’C:\Users\Samuel\Audio\Transcript’)

st.dataframe(pd.DataFrame({'id': [6142], 'title': ['dave do i have your permission to do this'],
              'link': ['https://www.youtube.com/watch?v=RrB9FqkiAAo'], 'publish_date': ['2021-08-22'],
              'keywords': ['the dave ramsey show|budge money debt cash|real...'], 
              'seconds': [265], 'rating': [4.81], 'view_count': [4032]}), width=5000)
2

You can use the following code to set the app to wide mode and the html markdown to increase the sidebar width:

import streamlit as st

st.set_page_config(page_title="The Ramsey Highlights", layout="wide")
st.markdown(
    """
    <style>
    [data-testid="stSidebar"][aria-expanded="true"] > div:first-child{
        width: 400px;
    }
    [data-testid="stSidebar"][aria-expanded="false"] > div:first-child{
        width: 400px;
        margin-left: -400px;
    }
     
    """,
    unsafe_allow_html=True,
)

The value 350px is the width of the sidebar. You can increase/decrease that value as you please but it must be the same in all three occurences.

image
image1920×834 36.4 KB

That should get you some more space to work with.

1 Like
3

Is there anyway to make it work in the new version of streamlit ?

4

Setting the page config to wide works the same in current versions.

As for the sidebar, you can do something a little simpler by setting the min and max width. (Setting the min and max to be the same value will lock it at a fixed width, but do so in a way that doesn’t create a little extra weirdness with the margin that needs fixing.)

css = '''
<style>
    [data-testid="stSidebar"]{
        min-width: 400px;
        max-width: 800px;
    }
</style>
'''
st.markdown(css, unsafe_allow_html=True)
2 Likes
5

This works wonders. Thank you so much!