Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs component scroll button on mobile scrolling very little

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

When on mobile, the scroll buttons only scroll by about 15 pixels when clicked on. Holding does not work on mobile as it brings up the item menu.

Is this issue related to a specific component?

Yes, Tabs

What did you expect to happen? What happened instead? What would you like to see changed?

Matching scroll distance/behaviour on mobile/desktop.

What browser are you working in?

any mobile, or alternatively, chrome responsive mode

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Cloud docs

Steps to reproduce the issue

Go to https://react.carbondesignsystem.com/?path=/story/components-tabs--default
In desktop chrome, toggle on device toolbar
From the drop down, select Iphone X
click on the scroll buttons

Screenshots or code

Issue Analytics

State:
Created 3 years ago
Comments:9 (8 by maintainers)

Top GitHub Comments

1reaction

emyarodcommented, Apr 5, 2021

the speed on mobile is currently the same as desktop, but desktop scrolls faster because a mouse click/trackpad press normally registers as several click events, but a tap on mobile only registers as a single click. to separate the behavior on mobile and nonmobile devices would be a bit tricky as well. I think this requires more investigation but for the time being at least mobile users will be able to swipe to scroll

0reactions

tay1orjonescommented, Oct 31, 2022

@mekaufman The scrolling behavior for tabs was improved with v11 - the change is unfortunately not backwards compatible with v10. The recommendation from here would be to use v11 as it’s fixed there.

https://user-images.githubusercontent.com/3360588/199058964-cf8477c3-47e0-470c-9eea-abd1ea7fc278.mov

Top Results From Across the Web

Material ui tabs not scrollable on mobile view

Material ui tabs scroll not working on mobile view. I tried to put the following variant="scrollable" scrollButtons="auto".

Building a Tabs component - web.dev

A foundational overview of how to build a tabs component similar to those found in iOS ... The navigation (pink) is horizontally scrollable...

overscroll-behavior - CSS: Cascading Style Sheets | MDN

The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll- ...

Telerik Web Forms Scrolling Tabs - RadTabStrip

The ScrollButtonsPosition property determines the position of the scroll buttons. Set the ScrollButtonsPosition property the parent tab to position the scroll ...

react-tabs-scrollable - NPM Package Overview

a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode. Version: 1.0.9 was published by ......