React-table: Horizontal scroll bar issue

[binaryj]

Versions:
6.5.3
6.6.0

When resizing a column on a table that doesn't have enough columns to make it horizontally scrollable and already has a vertical scroll bar, you can resize a column outside the width of the table like you would expect. However, the headers and body of the table have the undesired side effect of gaining additional horizontal scroll bars when there should only be one scroll bar for the body. You can reproduce this on your current demo.

https://codesandbox.io/s/4qrlxjpv9w

[gary-menzel]

I was easily able to replicate this (although I am not yet exactly sure why it is happening - it may be the final 'sizer' on the last column that is causing the discrepancy). I'll do some checking and see if that looks like the issue and provide additional info.

[erinknight242]

I have this issue, too; it happens on any table with a height or min-height set, if the browser window is narrow enough to force horizontal scroll, you don't have to change column size.

https://codesandbox.io/s/o5np5p0nrz

[realfresh]

Noticing the same thing as well, a potential quick fix in case someone is wondering might be to just override the scrollbar style to something slim.

[SyedSaifAli]

Having the same issue, and in my case, there are so many headers, so I need min-height or height fixed so that my headers for table show remain visible. But in IO's phones, I am unable to scroll horizontally, although i can vertically.

[gary-menzel]

While I can make this happen when I try based on what has been reported it is only in rare circumstances. If someone has a PR to address it reliably then it can be pulled in but it really has to be worked on by people who are experiencing it. I've had no problems (scrolling all directions, sizing columns, etc.) using react-table on an iPhone (but I use Chrome). It was definitely designed for mobile use.

[SyedSaifAli]

@gary-menzel Thanks for replying, Have you used style prop of ReactTable while using it on iPhone. I've got around 16-18 headers on my table and because of giving height as a prop to style to set the headers still I am unable to scroll.

[gary-menzel]

no - I don't set a height on my react-table - mobile devices don't work well with doing that and react-table was designed to be a paged table to work well on mobile devices (the height was added because some people asked for it for desktop work).

[SyedSaifAli]

Ya, so currently we are using both desktop and mobile to access that particular data in react table.
So do I conditionally set the style prop based on checking the userAgent?

[gary-menzel]

I guess you could do it that way. I just avoid using 'height' and work with react-table being paged regardless of the device.

[gary-menzel]

These are really more implementation questions and best asked on the #react-table Slack channel (badge at the top of the readme in the doco). I can see there is some strange behaviour but the github issue needs to be focussed on getting a PR for a change to fix it (workarounds are better discussed in the wider forum).

[SyedSaifAli]

Ok, thanks a lot @gary-menzel 👍

[jpatel3]

The multiple scrollbars happen only in the Safari. Is there any style override to avoid it?

[trident-ms]

It' caused by the vertical scroll bar in .ReactTable .rt-tbody element.
Add this css definition:
.ReactTable .rt-tbody {
overflow-x: hidden!important;
}

[oscarvdl]

See https://codesandbox.io/s/oo9j4z1139 for a horizontal scrollbar implementation I've created.

[tannerlinsley]

Closing due to issue age. If this issue was a question, please ask it again on https://spectrum.chat/react-table. If you think this issue needs to be reopened or if it should be turned into a pull-request, please check the latest version of React-Table for the issue or feature once more and reopen or create a PR if appropriate. Thanks!

[lindyw]

Besides @trident-ms 's approach, if you want to get rid of the double scrolling bar without disabling the scrolling function,
you can remove the following css style under .ReactTable .rt-tbody
// -webkit-box-align: stretch;
// -ms-flex-align: stretch;
// align-items: stretch;

without removing overflow:auto nor adding overflow-x: hidden !important;