Materialize: Tabbed Menu overflow issue

[lostlivio]

When using the tabbed menu, there are times when a horizontal scroll bar appears when there shouldn't.

See CodePen: http://codepen.io/anon/pen/gPgmpY. Click on the 3rd tab and make the page 917px wide. The indicator style that gets applied is
<div class="indicator" style="right: -1px; left: 588px;"></div>

Changing the -1px to 0px solves the problem...possible solution to check for less then 0 and then set to 0. This is a quick hack job, but it works to alleviate the issue. The page load also needs to be fixed as well.

  // append indicator then set indicator width to tab width
      $this.append('<div class="indicator"></div>');
      var $indicator = $this.find('.indicator');

      if ($this.is(":visible")) {
        var right = $tabs_width - (($index + 1) * $tab_width);
        var left = $index * $tab_width
        if(right < 0) {right = 0};

        $indicator.css({"right": right});
        $indicator.css({"left": left});
      }
      $(window).resize(function () {
        var right = $tabs_width - (($index + 1) * $tab_width);
        var left = $index * $tab_width
        if(right < 0) {right = 0};

        $tabs_width = $this.width();
        $tab_width = $this.find('li').first().outerWidth();
        if ($index < 0) {
          $index = 0;
        }
        if ($tab_width !== 0 && $tabs_width !== 0) {
           $indicator.css({"right": right});
           $indicator.css({"left": left});
        }
      });

[fratsloos]

This also happens for me in Firefox 43.0.1 without resizing, but when the last tab is activated. It only happens when there are > 3 tabs available. This fix should also be added to the click event when updating the indicator. This is in tabs.js, line 93-102.

[lostlivio]

For those needing a quick fix , a friend of mine suggested you can override the tab style.
.tabs {
overflow-x: hidden;
}

Also, a better solution to the above is to add a Math.min(0, expression) to each of the checks

[IPWright83]

I've noticed this on the Materialize example page too:

[acburst]

Fixed in 4f18709

[chahat]

I still have this issue with , v0.97.8

[friek108]

Does the issue occur when the side scrollbar (window scrollbar) gets added / removed when tabbing through different content? Ie. Tab "Home" home in your example has long content and creates a side scrollbar. However, when clicking Tab "Restaurant", it's only small content and the page scrollbar disappears?

Seems that the tab changes and calculates the width but then the vertical page scrollbar is removed after this happens, making the tabs horizontal scrollbar appear.

[chahat]

Hi friek,

Thanks for your reply. No it is not the case.

I am doing 'Linking to an External Page' with tabs, so tab content has nothing to do here. Besides the content in each tab is more or less same.

My observations are:
1) The horizontal scrollbar only happens when I am on the last tab, It is random. i work on multiple screens, so sometimes on page reload it does not show other times it does show. More that often the error does occur.
2) I am using grid to equidistant my tabs
3) I have increased the font size of the tabs header .

I am not sure if points 2/3 above are the problem causer, but even after removing them. I have seen the same issue.

thanks

[friek108]

@chahat you're right, I can confirm I have the same issue - sometimes on the last tab I see a horizontal scrollbar with no space either side to scroll.

And I can also say, that when I have 'long' vertical scrolling content on a page, and click to the last tab without a vertical page scrollbar, then the horizontal scrollbar still appears to compensate for the vertical page scrollbar being removed. Think maybe we should open a new issue.

[chahat]

Yes, Friek , your observations are similar to mine.

Please open an issue, that would be great.

I have this problem on my production website. Currently as a work around I am using overflow-x hidden on tabs but that is a very ugly solution.

Thanks

[friek108]

Yeah, and in addition, it doesn't work on mobile either if you do overflow-x

[ronnieroyston]

This may be due to a flexbox issue i encounetered. The fix was to toggle the wrapper/container's CSS display property + calling .offsetHeight.

The issue is that flexbox does not auto-reset on dynamic element appends. You have to manually reset the view/display as shows below. Note, you will need to replace body > header with whatever selector you need.

        //MUST RESET FLEX LAYOUT ON DYNAMIC CONTENT LOAD TO AVOID HORIZONTAL SCROOL ON MOBILE
        var elem = doc.querySelector("body > header");
        elem.style.display = 'none';
        elem.offsetHeight;
        elem.style.display = 'flex';