md-tabs scrolling is incorrectly disabled

[muratsevim]

md-tabs sometimes disables scrolling although there are more tabs to show.

It is possible to reproduce the issue by adding 3-4 more tabs to the Dynamic Tabs demo. https://material.angularjs.org/1.0.1/demo/tabs
The arrows at the beginning and end are disabled and scrolling with mouse does not work.

It was working correctly in 0.11.0
https://material.angularjs.org/0.11.0/#/demo/material.components.tabs

[kabsila]

I had the same problem

[naomiblack]

I'm not able to reproduce this. Can you provide more information?

[muratsevim]

On the Dynamic Tabs demo https://material.angularjs.org/1.0.1/demo/tabs
If I add two more tabs labeled "Test", the arrow on the left side becomes disabled, although there are more tabs there.

Tested and got same result on Angular Material 1.0.1 demo pages with Google Chrome Version 47.0.2526.106 (64-bit) on both linux and Mac OS X.

[jozsi]

If you have a list of tabs that do not fit on init, the arrows are disabled: http://codepen.io/anon/pen/BjmPYz

[mathewblackberry]

I came across the same issue, I believe the issue is with the following function

function updatePagingWidth() {
    var width = 1;
    angular.forEach(getElements().dummies, function (element) {
      width += Math.ceil(element.offsetWidth);
    });
    angular.element(elements.paging).css('width', width + 'px');
  }

since offsetWidth returns an Integer there appears to be rounding errors. replacing with getBoundingClientRect().width seems to fix the issue.

function updatePagingWidth() {
    var width = 0;
    angular.forEach(getElements().dummies, function (element) {
      width += Math.ceil(element.getBoundingClientRect().width);
    });
    angular.element(elements.paging).css('width', width + 'px');
  }

The last tab is overflowing to the next line causing the issue.

[radulucaciu]

I am seeing the same issue

[jozsi]

Fixed in v1.0.5 via 2390d88

[muratsevim]

Yes, looks like this is fixed in v1.0.5. Thanks!

[hani647]

I'm using v.1.0.9 this problem still persist. Initially scroller are working fine but when I scroll on tabs scroller are disabled since more items are there to show. Any solution?

[Splaktar]

@hani647 please test against 1.1.7 and if you are still seeing an issue then please open a new issue with a CodePen that demonstrates the problem. It would be helpful to know what browser you are seeing this on, etc.

[knicefire]

Hi I'm experiencing this as well.
And it has to do with jQuery.. my version is 2.2.4
and the fact that jquery events don't provide event.wheelDelta instead it's required to look into event.originalEvent

the exact function that uses it is

  /**
   * When pagination is on, this makes sure the selected index is in view.
   * @param event
   */
  function scroll (event) {
    if (!ctrl.shouldPaginate) return;
    event.preventDefault();
    ctrl.offsetLeft = fixOffset(ctrl.offsetLeft - event.wheelDelta);
  }

So after an attempt of scrolling the offsetLeft became to be NaN and it breaks the scrolling altogether

An easy fix for that is to configure jquery event properties so that it copies it from originalEvent

jQuery.event.props.push("wheelDelta");

From docs https://learn.jquery.com/events/event-extensions/#jquery-event-props-array