Hi, I’m on the first experience with Streamlit and there is possibile I miss some config or option.
The starting point of my app is to show database info selected from a tree showed into sidebar.
I solved the tree using streamlit_antd_components,
but the dataframe and other components will use only a very small part of the available space.
The ‘Fullscreen’ mode, clicking the button, uses all the available space and resizes as expected with the browser window,
but hides all the rest.
There is a way to show and resize the dataframe into the container like in ‘Fullscreen’ mode?
This is an axample code.
import streamlit as st
import pandas as pd
item_count = 100
column_count = 100
row_count = 1000
columns = []
for col in range(column_count):
columns.append(f'column_{col:04d}')
df = pd.DataFrame(columns=columns)
for row in range(row_count):
cells = []
for col in range(column_count):
cells.append(f'cell_{row:04d}_{col:04d}')
df.loc[row] = cells
with st.sidebar:
st.write("sidebar")
for i in range(item_count):
st.write(f"item_{i:04d}")
with st.container():
st.write("header")
st.dataframe(df, use_container_width=False)
st.write("footer")
Thanks Goyo for the reply.
The options width and height allow to set a fixed value, that is not the goal.
I tryed to remove the st.container() without any visible change.
I added border=True as st.container() option to see the used area.
Thanks for the suggestion: much better but not enough.
Horizontal resize works well and the wasted space on the left and right of the container might be acceptable, but no vertical space and resize management like ‘Fullscreen’ mode does.
‘Fullscreen’ mode does it very well, fills the browser window, resizes the table accordingly the browser window and always shows both the scrollbars around the table; why it is not possible to do the same into a container?
Thanks for the reply but the code do not what i’m trying to do.
If you want to see what i mean, run my code and click the ‘Fullscreen’ button that appear in the upper right corner of dataframe.
The needed code is already implemented into Streamlit and used for the ‘Fullscreen’ mode.
This code
do not fill the space
do not resize the data vertically nor horizontally
both the scollbars scroll the browser window, not the data
Thanks everyone for your replies.
Using the suggestions I was able to assemble this code; it is tricky, not fluid (needs some forced rerun) and requires user intervention, but does what I want. The st.dataframe width is well managed using layout=“wide” as st.set_page_config option. The rest is about the st.dataframe height.
import streamlit as st
from streamlit_js_eval import streamlit_js_eval
import pandas as pd
import time
st.set_page_config(page_title='title', layout="wide")
if "run_count" not in st.session_state:
st.session_state.run_count = 0
st.session_state.run_count += 1
if "height" not in st.session_state:
st.session_state.height = None
if "skip_streamlit_js_eval" not in st.session_state:
st.session_state.skip_streamlit_js_eval = False
# get window height using streamlit_js_eval
# streamlit_js_eval work-arounds:
# 1. returns None without sleep and retry
# 2. use some empty space into the container
#print(f"Run count before check: {st.session_state.run_count:4d} --- Window Height: {str(st.session_state.height):4s} --- Skip skip_streamlit_js_eval: {st.session_state.skip_streamlit_js_eval}")
if not st.session_state.skip_streamlit_js_eval:
time.sleep(0.2) # neverending loop without sleep
height = streamlit_js_eval(js_expressions='window.outerHeight', key = 'window.outerHeight')
if height is not None:
st.session_state.skip_streamlit_js_eval = st.session_state.height == height
st.session_state.height = height
# print(f"Run count before rerun: {st.session_state.run_count:4d} --- Window Height: {str(st.session_state.height):4s} --- Skip skip_streamlit_js_eval: {st.session_state.skip_streamlit_js_eval}")
st.rerun()
st.session_state.skip_streamlit_js_eval = False
#print(f"Run count after check: {st.session_state.run_count:4d} --- Window Height: {str(st.session_state.height):4s} --- Skip skip_streamlit_js_eval: {st.session_state.skip_streamlit_js_eval}")
# get other (non dataframe) components height
# value found trying and trying ...
other_components_height = 317
# compute dataframe height
dataframe_height = max(0, int(st.session_state.height - other_components_height))
# Remove whitespace from the top of the page and sidebar
# https://discuss.streamlit.io/t/reduce-white-space-top-of-the-page/21737
st.markdown("""
<style>
.block-container {
padding-top: 3rem;
padding-bottom: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
</style>
""", unsafe_allow_html=True)
item_count = 30
column_count = 30
row_count = 50
columns = []
for col in range(column_count):
columns.append(f'column_{col:04d}')
df = pd.DataFrame(columns=columns)
for row in range(row_count):
cells = []
for col in range(column_count):
cells.append(f'cell_{row:04d}_{col:04d}')
df.loc[row] = cells
with st.sidebar:
st.write("sidebar")
for i in range(item_count):
st.write(f"item_{i:04d}")
with st.container(border = True):
st.write(f"header --- Run count: {st.session_state.run_count} --- Window Height: {st.session_state.height} --- Dataframe Height: {dataframe_height}")
if dataframe_height:
st.dataframe(df, height=dataframe_height)
st.write("footer")
At start the st.dataframe fills the height of the window
To compute the required dataframe height I must know the window height and the height of the other Streamlit components, found a value good for maximized window (for my monitor resolution).
The call to streamlit_js_eval returns the window height but:
must be executed multiple times with a delay between the calls to get the value instead of None
used some space (height) like an empty st.write
So the script must call st.rerun until streamlit_js_eval call returns not None value, save the value and then rerun without the streamlit_js_eval call.
As result the page will be drawn an redrawn with different layouts.
This code is enough for a demo but not for production.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.