Dash Table Experiments- scrollbar disappeared in Chrome

Dash Python
1

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
2

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…)

3

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

4

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

6

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 DataTable Width & Column Width | Dash for Python Documentation | Plotly which mentions Horizontal Scroll.

1 Like
7

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
8

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
9

Amazing, horizontal scrolling now works in Chrome! Thanks!