feat(tabs): adds support for dynamic height based on tab contents

Closes #2088

src/components/tabs/demoDynamicTabs/style.scss

@@ -28,11 +28,15 @@ label {
 [layout-align] > * {
   margin-left: 8px;
 }
-form > [layout] > * {
-  margin-left: 8px;
-}
-form > [layout] > span {
-  padding-top:2px
+form {
+  > [layout] {
+    > * {
+      margin-left: 8px;
+    }
+    > span {
+      padding-top:2px
+    }
+  }
 }
 .long > input {
   width: 264px;

src/components/tabs/js/tabsController.js

@@ -44,15 +44,24 @@
       $scope.$watch('$mdTabsCtrl.offsetLeft', handleOffsetChange);
       angular.element($window).on('resize', function () { $scope.$apply(handleWindowResize); });
       $timeout(updateInkBarStyles, 0, false);
+      $timeout(updateHeightFromContent, 0, false);
     }
 
     function getElements () {
-      var elements = {};
-      elements.canvas = $element[0].getElementsByTagName('md-tabs-canvas')[0];
-      elements.wrapper = elements.canvas.getElementsByTagName('md-pagination-wrapper')[0];
-      elements.tabs    = elements.wrapper.getElementsByTagName('md-tab-item');
-      elements.dummies = elements.canvas.getElementsByTagName('md-dummy-tab');
-      elements.inkBar  = elements.wrapper.getElementsByTagName('md-ink-bar')[0];
+      var elements      = {};
+
+      //-- gather tab bar elements
+      elements.wrapper  = $element[0].getElementsByTagName('md-tabs-wrapper')[0];
+      elements.canvas   = elements.wrapper.getElementsByTagName('md-tabs-canvas')[0];
+      elements.paging   = elements.canvas.getElementsByTagName('md-pagination-wrapper')[0];
+      elements.tabs     = elements.paging.getElementsByTagName('md-tab-item');
+      elements.dummies  = elements.canvas.getElementsByTagName('md-dummy-tab');
+      elements.inkBar   = elements.paging.getElementsByTagName('md-ink-bar')[0];
+
+      //-- gather tab content elements
+      elements.contentsWrapper = $element[0].getElementsByTagName('md-tabs-content-wrapper')[0];
+      elements.contents = elements.contentsWrapper.getElementsByTagName('md-tab-content');
+
       return elements;
     }
 
@@ -88,7 +97,7 @@
     }
 
     function handleOffsetChange (left) {
-      angular.element(elements.wrapper).css('left', '-' + left + 'px');
+      angular.element(elements.paging).css('left', '-' + left + 'px');
       $scope.$broadcast('$mdTabsPaginationChanged');
     }
 
@@ -158,6 +167,7 @@
       $scope.selectedIndex = getNearestSafeIndex(newValue);
       ctrl.lastSelectedIndex = oldValue;
       updateInkBarStyles();
+      updateHeightFromContent();
       $scope.$broadcast('$mdTabsChanged');
     }
 
@@ -182,19 +192,27 @@
       });
     }
 
+    function updateHeightFromContent () {
+      if (!$scope.dynamicHeight) return $element.css('height', '');
+      var tabContent = elements.contents[$scope.selectedIndex],
+          contentHeight = tabContent.offsetHeight,
+          tabsHeight    = elements.wrapper.offsetHeight,
+          newHeight     = contentHeight + tabsHeight;
+      $element.css('height', newHeight + 'px');
+    }
+
     function updateInkBarStyles () {
       if (!ctrl.tabs.length) return;
       //-- if the element is not visible, we will not be able to calculate sizes until it is
       //-- we should treat that as a resize event rather than just updating the ink bar
       if (!$element.prop('offsetParent')) return handleResizeWhenVisible();
       var index = $scope.selectedIndex,
-          totalWidth = elements.wrapper.offsetWidth,
+          totalWidth = elements.paging.offsetWidth,
           tab = elements.tabs[index],
           left = tab.offsetLeft,
           right = totalWidth - left - tab.offsetWidth;
       updateInkBarClassName();
       angular.element(elements.inkBar).css({ left: left + 'px', right: right + 'px' });
-
     }
 
     function updateInkBarClassName () {

src/components/tabs/js/tabsDirective.js

@@ -56,6 +56,7 @@
  * @param {boolean=} md-no-bar If present, disables the selection ink bar.
  * @param {string=}  md-align-tabs Attribute to indicate position of tab buttons: `bottom` or `top`; default is `top`
  * @param {string=} md-stretch-tabs Attribute to indicate whether or not to stretch tabs: `auto`, `always`, or `never`; default is `auto`
+ * @param {boolean=} md-dynamic-height When enabled, the tab wrapper will resize based on the contents of the selected tab
  *
  * @usage
  * <hljs lang="html">
@@ -89,7 +90,8 @@
   function MdTabs ($mdTheming) {
     return {
       scope: {
-        selectedIndex: '=?mdSelected',
+        dynamicHeight: '=?mdDynamicHeight',
+        selectedIndex: '=mdSelected',
         stretchTabs: '@?mdStretchTabs'
       },
       transclude: true,
@@ -159,15 +161,16 @@
             </div>\
           </md-tabs-canvas>\
         </md-tabs-wrapper>\
-        <md-tabs-content-wrapper ng-if="$mdTabsCtrl.hasContent">\
+        <md-tabs-content-wrapper ng-show="$mdTabsCtrl.hasContent">\
           <md-tab-content\
-              ng-repeat="(index, tab) in $mdTabsCtrl.tabs" \
-              md-tab-data="tab"\
               id="tab-content-{{tab.id}}"\
-              aria-labelledby="tab-item-{{tab.id}}"\
               role="tabpanel"\
+              aria-labelledby="tab-item-{{tab.id}}"\
+              md-tab-data="tab"\
               md-swipe-left="$mdTabsCtrl.incrementSelectedIndex(1)"\
               md-swipe-right="$mdTabsCtrl.incrementSelectedIndex(-1)"\
+              ng-if="$mdTabsCtrl.hasContent"\
+              ng-repeat="(index, tab) in $mdTabsCtrl.tabs" \
               ng-class="{\
                 \'md-no-transition\': $mdTabsCtrl.lastSelectedIndex == null,\
                 \'md-active\': tab.isActive(),\
@@ -179,6 +182,11 @@
       controller: 'MdTabsController',
       controllerAs: '$mdTabsCtrl',
       link: function (scope, element, attr) {
+        angular.forEach(scope.$$isolateBindings, function (binding, key) {
+          if (binding.optional && angular.isUndefined(scope[key])) {
+            scope[key] = attr.hasOwnProperty(attr.$normalize(binding.attrName));
+          }
+        });
         //-- watch attributes
         attr.$observe('mdNoBar', function (value) { scope.noInkBar = angular.isDefined(value); });
         //-- set default value for selectedIndex

src/components/tabs/tabs.scss

@@ -37,6 +37,14 @@ md-tabs {
       border-style: solid;
     }
   }
+  &[md-dynamic-height] {
+    transition: height $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
+    md-tabs-content-wrapper {
+      md-tab-content {
+        bottom: initial;
+      }
+    }
+  }
   md-tabs-wrapper {
     display: block;
     position: relative;