Materialize: Scrollbar appears for tabbed menu

[friek108]

Description

The horizontal scrollbar for the tabs menu keeps appearing when you navigate to the last menu item on a desktop/laptop browser.

Please refer to the recent discussion here from Feb 11: https://github.com/Dogfalo/materialize/issues/2584#issuecomment-279027006

Repro Steps

When clicking on the last tabbed menu item on a desktop, the horizontal scrollbar sometimes appears. There are 2 scenarios in which this happens:

1. Sometimes when navigating to the last tab, the horiztonal scrollbar appears. You can't scroll this horizontal tab menu, but the scrollbar appears. Have a look at this comment for a screenshot https://github.com/Dogfalo/materialize/issues/2584#issuecomment-279027006

2. If navigating from a tab that a) isn't the last tab and b) has a lot of content that requires the vertical page scrollbar to be present, and then you click on the last tab that doesn't require a vertical page scrollbar. What happens is 1) The tabs width gets set, 2) the vertical page scrollbar is removed by the browser 3) a horizontal tabs scrollbar appears that allows you to scroll the width of the page scrollbar. Refer to this comment https://github.com/Dogfalo/materialize/issues/2584#issuecomment-287696155

[acburst]

Hmm, I added some rounding to the indicator positions in 50c6718

Let me know if this fixes the issue

[bui]

50c6718 does not fix the issue on my end. For me, the horizontal scrollbar appears when switching from a tab that causes the document to be scrollable due to its length, to a tab that causes the document scrollbar to disappear (ie. less content), if that makes sense.

[acburst]

Do you think you could recreate this in a codepen? I'm finding it hard to reproduce

[bui]

https://codepen.io/anon/pen/EWeVeN

[tomscholz]

@acburst It is easier to reproduce on Windows

[friek108]

I've tested the codepen on windows 10 in Chrome, Edge and Firefox on windows 10 and can confirm it is reproducing the issue.

[NonameSLdev]

Confirmed in firefox.
The problem is that tabs are automatically scrollable scrollable by default, which is correct according to the material guidelines (Because the two tab types are scrollable and fixed).
The problem is, that the materialize scrollable tabs and the actual scrollable tabs aren't the same, because material design doesn't use the default HTML scroll. It's either sliding (mobile) or a button. Here's how scrollable tabs on web should look:


If someone could implement this then we're killing 2 birds with 1 stone. I may if I find the time.

Regarding your issue: You'd think adding tabs-fixed-width class to your .tabs element would solve it. It doesn't. I'm making a PR right now to make overflow-x: hidden in tabs with tabs-fixed-width

EDIT: Once https://github.com/Dogfalo/materialize/pull/4441 gets approved all you have to do is add tabs-fixed-width to your tabs (Which is your goal from the beginning as it seems from your codepen/screenshot) and the problem will be solved.

[chintogtokh]

@NonameSLdev That solution fixes the issue when there is enough space to actually hold all the tabs, but it fails when the tabs outgrow the available screen size, the other tabs outside the screen are now not accessible. See https://codepen.io/anon/pen/MrdgjY Obviously that particular Codepen is just bad design, but the same thing can happen with just 5 tabs on mobile.

A better way to fix it is, I think, in the JS. The indicator element has a negative right: css attribute, because the JS doesn't take into account the right scrollbar width (which can be different per browser).

[friek108]

Something like this seems to work as a workaround if you modify the calcRighPos function in the tabs.js file and add in the getScrollbarWidth function..

// Finds right attribute for indicator based on active tab.
  // el: jQuery Object
    var calcRightPos = function(el) {
      var retVal = Math.ceil($tabs_width - el.position().left - el[0].getBoundingClientRect().width - $this.scrollLeft());
      return retVal <0 ? retVal + getScrollbarWidth() : retVal;
  };

  //CHANGED/ADDED: additional function to get scrollbar width
  var getScrollbarWidth = function() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    var retVal = widthNoScroll - widthWithScroll;

    return widthNoScroll - widthWithScroll;
  }