Black Lives Matter. Please consider donating to Black Girls Code today.

Dash Table Experiments- scrollbar disappeared in Chrome

Hi,

I got into a weird issue. I built an app using Dash, which worked perfectly fine till yesterday. All of a sudden, the horizontal scrollbar at the bottom of Dash Table Experiments disappeared, as a result of which I don’t see all the columns in my table. (in Chrome)

However, in IE, the application works fine. Any ideas as to why this could be happening?
I tried adding the ‘overflow’ option in css, but it just adds a scrollbar at the bottom of the table, which doesn’t even move much.

Any help would be appreciated.

Thanks

1 Like

Just confirming I have the same issue… (and have quite a big table in deployment that people need to scroll horizontally, so also somewhat of an urgent issue…)

Hello,

I’m also facing the same issue, the scrollbar worked fine last week with Chrome but now it doesn’t work on Chrome I have to use IE.

is there any solution ?

Thanks

Even i am facing the same issue, looks like the Recent chrome upgrade may be root cause.


I would suggest switching to dash_table instead of using dash_table_experiments. You can see my example of horizontal scrolling in the above link (I am using Chrome as well), or read this page https://dash.plot.ly/datatable/sizing which mentions Horizontal Scroll.

1 Like

The horizontal scrolling still doesn’t work in Chrome. But I would love to stay with data-table-experiments because filtering of column works much better there. Is there a way for filtering in dash_table to look the same way as it does in _experiments? In dash_table it is practically not usable. So I need either to fix horizontal scroll with _experiments in Chrome or switch to dash_table and have filtering look as it is in _experiments. Any ideas?

2 Likes

I finally figured out what the problem was-

In Chrome v70, Grid Row style uses an experimental css inline property contain: layout by removing this property it will work as expected.

So just add this to your css and it should work fine.

.react-grid-Row {
contain: none !important;
}

Cheers!

1 Like

Amazing, horizontal scrolling now works in Chrome! Thanks!