update docs to show examples without double scrollbars

[nicolaskruchten]

In the docs here https://dash.plot.ly/datatable/sizing I see both horizontal and vertical doubled scrollbars:

[KMouratidis]

Same issue (?) on Chromium, Version 70.0.3538.77

Console inspection shows no errors. When highlighting the inner div with class dash-spreadsheet-inner dash-spreadsheet dash-grow only the first scrollbar is highlighted. The second is highlighted with the outer div with class dash-spreadsheet dash-spreadsheet-container dash-grow.

When opening the console I manually fiddle with the style (removing the overflow-y: scroll;), and it seems to solve it:

Works fine on Firefox 63.0 (*without needing the "fix").

[hearues-zueke-github]

I have also got the same issue like mentioned earlier.

On Linux in Chrome Version 68.0.3440.106 (Official Build) (64-bit) I am also getting horizontal and vertical double scrollbars. Here is also a comparison when I turn of the scrollbar manually:

Also on Linux in Firefox 63.0 (64-bit) I am getting the same issue too.

The current fix in Chrome is also working in Firefox too.

Current versions on my PC:

Linux Ubuntu 18.04.1 LTS
plotly 3.4.1
dash_table 3.1.6

[vivekvs1]

Is there a fix to this bug yet? Thanks

[tuner007]

You can try below steps:

1. 'overflow-y': 'Scroll' to 'overflow-y': 'auto' & 'overflow-x': 'Scroll' to 'overflow-x': 'auto'
   or

2. 'overflowY': 'Scroll' to 'overflowY': 'auto' & 'overflowX': 'Scroll' to 'overflowX': 'auto'

3. Check if you are including any border in your table style code, if yes try removing it.
   For example i removed this from style_table : 'border': 'thin lightgrey solid'

4. Check 'overflow-y': & 'overflow-x': in "container" style, try hiding them with "hidden"

I just started using dash.. i don't know the correct fix.. these steps resolved my issue so thought of sharing it.

[vivekvs1]

Hi Arpit,

Thanks for your suggestions. Making 'overflowY' 'auto', hides both the scrollbars. However for the case when I need the table to be scrollable, its introducing two scrollbars. I tried changing the style of the containing Div to 'overflowY': hidden - but it doesn't seem to do anything.

This to me appears to be a bug. Can someone confirm?

[vivekvs1]

One way to make this work is - instead of using 'overflow-y' as 'scroll', make 'virtualization' as 'True'

[imsrgadich]

html.Div([
    DataTable(....)
  ], 
style={
   "overflowX": "scroll",
   'height': 300},
   )

Adding style element in the Div instead of style_table inside DataTable solves the issue and gets rid of double scroll bars.

[QuentinDumont]

@imsrgadich , Thx man, I have been looking for a solution like this for a while.

[shengqiangzhang]

@imsrgadich

Thanks,it solved the problem.