fix(tabs): limits the width of tabs to the width of md-tab-canvas

Closes #3577

src/components/tabs/demoDynamicHeight/style.scss

@@ -3,7 +3,7 @@ md-content {
   md-tabs {
     background: #f6f6f6;
     border: 1px solid #e1e1e1;
-    md-tabs-canvas {
+    md-tabs-wrapper {
       background: white;
     }
   }

src/components/tabs/demoDynamicTabs/style.scss

@@ -5,7 +5,7 @@ md-content {
     md-tab-content {
       background: #f6f6f6;
     }
-    md-tabs-canvas {
+    md-tabs-wrapper {
       background: white;
     }
   }

src/components/tabs/js/tabsController.js

@@ -22,6 +22,8 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
   defineProperty('focusIndex', handleFocusIndexChange, ctrl.selectedIndex || 0);
   defineProperty('offsetLeft', handleOffsetChange, 0);
   defineProperty('hasContent', handleHasContent, false);
+  defineProperty('maxTabWidth', handleMaxTabWidth, getMaxTabWidth());
+  defineProperty('shouldPaginate', handleShouldPaginate, false);
 
   //-- define boolean attributes
   defineBooleanAttribute('noInkBar', handleInkBar);
@@ -39,7 +41,6 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
   ctrl.lastSelectedIndex = null;
   ctrl.hasFocus = false;
   ctrl.lastClick = true;
-  ctrl.shouldPaginate = false;
   ctrl.shouldCenterTabs = shouldCenterTabs();
 
   //-- define public methods
@@ -74,10 +75,10 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
     $mdUtil.nextTick(function () {
       updateHeightFromContent();
       adjustOffset();
-      updatePagination();
       updateInkBarStyles();
       ctrl.tabs[ctrl.selectedIndex] && ctrl.tabs[ctrl.selectedIndex].scope.select();
       loaded = true;
+      updatePagination();
     });
   }
 
@@ -101,10 +102,18 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
     $scope.$on('$destroy', cleanup);
   }
 
+  /**
+   * Configure watcher(s) used by Tabs
+   */
   function configureWatchers () {
     $scope.$watch('$mdTabsCtrl.selectedIndex', handleSelectedIndexChange);
   }
 
+  /**
+   * Creates a one-way binding manually rather than relying on Angular's isolated scope
+   * @param key
+   * @param handler
+   */
   function defineOneWayBinding (key, handler) {
     var attr = $attrs.$normalize('md-' + key);
     if (handler) defineProperty(key, handler);
@@ -135,11 +144,32 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
 
   //-- Change handlers
 
+  /**
+   * Toggles stretch tabs class and updates inkbar when tab stretching changes
+   * @param stretchTabs
+   */
   function handleStretchTabs (stretchTabs) {
     angular.element(elements.wrapper).toggleClass('md-stretch-tabs', shouldStretchTabs());
     updateInkBarStyles();
   }
 
+  function handleMaxTabWidth (newWidth, oldWidth) {
+    if (newWidth !== oldWidth) {
+      $mdUtil.nextTick(ctrl.updateInkBarStyles);
+    }
+  }
+
+  function handleShouldPaginate (newValue, oldValue) {
+    if (newValue !== oldValue) {
+      ctrl.maxTabWidth = getMaxTabWidth();
+      ctrl.shouldCenterTabs = shouldCenterTabs();
+      $mdUtil.nextTick(function () {
+        ctrl.maxTabWidth = getMaxTabWidth();
+        adjustOffset(ctrl.selectedIndex);
+      });
+    }
+  }
+
   /**
    * Add/remove the `md-no-tab-content` class depending on `ctrl.hasContent`
    * @param hasContent
@@ -430,7 +460,7 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
    */
   function shouldPaginate () {
     if (ctrl.noPagination || !loaded) return false;
-    var canvasWidth = $element.prop('clientWidth');
+    var canvasWidth = Math.min($element.prop('clientWidth'), ctrl.maxTabWidth);
     angular.forEach(elements.dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
     return canvasWidth < 0;
   }
@@ -478,8 +508,10 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
    */
   function updatePagination () {
     ctrl.shouldPaginate = shouldPaginate();
-    ctrl.shouldCenterTabs = shouldCenterTabs();
-    $mdUtil.nextTick(function () { adjustOffset(ctrl.selectedIndex); });
+  }
+
+  function getMaxTabWidth () {
+    return elements.canvas.clientWidth;
   }
 
   /**

src/components/tabs/js/tabsDirective.js

@@ -134,7 +134,7 @@ function MdTabs ($mdTheming, $mdUtil, $compile) {
               <md-tab-item\
                   tabindex="-1"\
                   class="md-tab"\
-                  style="max-width: {{ tabWidth ? tabWidth + \'px\' : \'none\' }}"\
+                  style="max-width: {{ $mdTabsCtrl.maxTabWidth + \'px\' }}"\
                   ng-repeat="tab in $mdTabsCtrl.tabs"\
                   role="tab"\
                   aria-controls="tab-content-{{::tab.id}}"\

src/components/tabs/tabs.scss

@@ -239,6 +239,8 @@ md-tab {
   float: left;
   font-weight: 500;
   box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
   &.md-focused {
     box-shadow: none;
     outline: none;