Tabbed Menu overflow issue

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});
        }
      });

[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

[acburst]

Fixed in 4f18709