This repository was archived by the owner on Aug 29, 2025. It is now read-only.
Repository navigation
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
Scroll bar bouncing #919
Description
Originally reported on community.plotly.com.
I noticed a bug/glitch when scrolling through a DataTable with a header taller than a single line. What happens is that every time when scrolling all the way to the bottom of the table, the scroll bar (and the view) jumps up a bit. This is annoying and it also makes it hard to read values from the bottom of the table. Interestingly, the bug does not occur when the table header only has one line.
Package versions:
OS: various
browser: various
dash 1.20.0
dash-bootstrap-components 0.12.2
dash-core-components 1.16.0
dash-html-components 1.1.3
dash-renderer 1.9.1
dash-table 4.11.3
Reproducible example:
import dash
import dash_table
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
# duplicating rows to make the table longer
df = df.append([df]*20, ignore_index=True)
# renaming one column to have a long name so that table header does not fit on one row
df.rename(columns={'State': 'State State State State State State State State State State'}, inplace=True)
app = dash.Dash(__name__)
app.layout = dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict('records'),
style_header={
'height': 'auto', 'whiteSpace': 'normal', # text wrapping
},
fixed_rows={'headers': True},
style_table={'maxHeight': 600, 'maxWidth': 600}
)
if __name__ == '__main__':
app.run_server(debug=True)
Activity
AnnMarieW commentedon Jul 8, 2021
Just one more piece of data -- I ran the example and can reproduce this behavior on Firefox but it works fine (no bouncing) on Chrome.
vsisl commentedon Jul 9, 2021
Thanks for trying this out @AnnMarieW.
For me, it was happening on all platforms that I tried:
gpedro178 commentedon May 26, 2022
I notest this bug happens when you have fixed headers and they can wrap creating taller cells, in my case the headers have a height of 61px.
You can fix the bouncing of the last row if you set the height of the headers to the be their max height.
In my case:
style_header={"maxHeight": "60px", "minHeight": "60px", "height": "60px"}I have the feeling that, when you have fixed headers, the "tallness" of the header is been calculated with one of the headers cells that doesn't have the max height and that cause the bounce when you focus on the last rows.
I had this problem while using Chrome.
AnnMarieW commentedon May 26, 2022
@gpedro178 Thanks - this is a nice workaround! I added it to the forum post as well - I'm sure people will find this helpful!