Scroll bar bouncing

[vsisl]

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)

[AnnMarieW]

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]

Thanks for trying this out @AnnMarieW.

For me, it was happening on all platforms that I tried:

• Chrome, Firefox, Safari (macOS)
• Chromium, Firefox (linux)

[gpedro178]

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]

@gpedro178 Thanks - this is a nice workaround! I added it to the forum post as well - I'm sure people will find this helpful!