DataFrames in columns intermittently overlapping.

[christian-cooper-shell]

Summary

I have a multi-column layout, with each column containing a DataFrame with some styling, occasionally when rendering I'm seeing the right-most columns of one DataFrame overlapping the left-most columns of the DataFrame in the adjacent column to the right.

Steps to reproduce

Code snippet:

import pandas as pd
import streamlit as st

st.set_page_config(layout='wide', page_title='Example', initial_sidebar_state='expanded')
st.sidebar.write('Close sidebar and issue sometimes goes away')

# Build a bunch of data to display
df1 = pd.DataFrame(data=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], index=[0, 1, 2], columns=['AA', 'BB', 'CC'])
df4 = (df1 * 111).rename(columns={'AA': 'DD', 'BB': 'EE', 'CC': 'FF'}).copy()
df2 = df1.join(df4) * 1000
df3 = df4.join(df1) * 11111

# Display data
c1, c2, c3, c4 = st.columns((3, 4, 5, 3))
c1.subheader('Frame 1')
c1.table(df1)
c2.subheader('Frame 2')
c2.table(df2)
c3.subheader('Frame 3')
c3.table(df3)
c4.subheader('Frame 4')
c4.table(df4)

Steps we should take to reproduce the bug:

1. Render on 1820 x 1080 resolution display using Chrome browser.

Expected behaviour:

Each data frame is displayed restricted to the boundaries of its parent column. All columns to be clearly visible without overlapping.

Actual behaviour:

Columns are intermittently seen overlapping like so:

Is this a regression?

Not sure - on prior occasions I remember seeing scroll bars attached to the data frame if it was too wide.

Debug info

• Streamlit version: 1.7.0
• Python version: 3.9.13
• Using Venv
• OS version: Windows 10 Enterprise 21H2 (19044.1766). Windows Feature Experience Pack 120.2212.4180.0
• Browser version: Chrome 103.0.5060.66 (Official Build) (64-bit)

[jrieke]

Hey @christian-cooper-shell,

thanks for reporting this! I see that you are using our old dataframe implementation in Streamlit 1.7. Could you upgrade Streamlit to >=1.10 and see if this still happens? We updated the UI for st.dataframe in 1.10, so maybe this might already fix your problem!

[mayagbarnes]

@jrieke: Unfortunately, looks like this issue is still present with streamlit version 1.10, so we could explore overflow styling for tables:

@christian-cooper-shell: I believe you should be able to achieve the intended behavior for your use case by using st.write to display your dataframes vs. st.table (though I imagine we would like st.table to exhibit the same behavior in the future):

import pandas as pd
import streamlit as st

st.set_page_config(layout='wide', page_title='Example', initial_sidebar_state='expanded')
st.sidebar.write('Close sidebar and issue sometimes goes away')

# Build a bunch of data to display
df1 = pd.DataFrame(data=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], index=[0, 1, 2], columns=['AA', 'BB', 'CC'])
df4 = (df1 * 111).rename(columns={'AA': 'DD', 'BB': 'EE', 'CC': 'FF'}).copy()
df2 = df1.join(df4) * 1000
df3 = df4.join(df1) * 11111

# Display data
c1, c2, c3, c4 = st.columns((3, 4, 5, 3))

c1.subheader('Frame 1')
c1.write(df1)
c2.subheader('Frame 2')
c2.write(df2)
c3.subheader('Frame 3')
c3.write(df3)
c4.subheader('Frame 4')
c4.write(df4)

[christian-cooper-shell]

@jrieke @mayagbarnes Thanks for the suggestions and work around guys.

And I'll be sure to add updating to a later version of Streamlit to my ever increasing list of things to do! :)

[jrieke]

Oh yeah that's what I meant, use st.write or st.dataframe instead of st.table. Thx for pointing this out @mayagbarnes. I think at some point we should figure out what we do with st.table (if we want to change it to use the same UI as st.dataframe, or keep it as is, or even deprecate it).