search

patternfly / patternfly-react

A set of React components for the PatternFly project.
https://react-staging.patternfly.org/
MIT License
794 stars 356 forks source link

PF4 Tabs: scroll button #1451

Closed dlabrecq closed 5 years ago

dlabrecq commented 5 years ago

Why is there a scroll button associated with the PF4 tabs? Odly, this does not appear on Chrome, only with Firefox. How do we get rid of it?

screen shot 2019-02-26 at 11 25 42 am

rachael-phillips commented 5 years ago

Hi @dlabrecq we don't see this issue on our side. Do you mind telling us how to reproduce it?

dlabrecq commented 5 years ago

All I can say is that it shows up on Firefox, not Chrome. And it's still present with the latest prerelease packages.

dlabaj commented 5 years ago

@dlabrecq Do you have a link to the file that has this issue? Also what version of firefox are you using?

dlabrecq commented 5 years ago

Tested with Firefox v65.0.1 (64-bit) and 66.0 (64-bit).

Note that this is now happening in multiple places: Screen Shot 2019-03-19 at 12 59 55 PM

We're using tabs in a few places; for example:

Overview tabs: https://github.com/project-koku/koku-ui/blob/master/src/pages/overview/overview.tsx#L120

Card tabs: https://github.com/project-koku/koku-ui/blob/master/src/pages/ocpOnAwsDashboard/ocpOnAwsDashboardWidget.tsx#L295

TheRealJon commented 5 years ago

The Tabs component uses the isElementInView util function to establish whether the first and last Tab element in the TabList are fully visible. Firefox (and Safari) calculated these Tab elements' clientWidth to be slightly larger than Chrome did, causing this function to return false for the last tab (i.e. the last tab was incorrectly considered partially out of view on the right side). The showRightScrollButton state of the Tabs component is set to the inverse of that function's return value, thus causing the right scroll button to appear in those browsers.