From 01b7af30cce5fe21cdd6dfdb73755cea6f5fcdf6 Mon Sep 17 00:00:00 2001
From: Robert Messerle <rmesserle@google.com>
Date: Mon, 5 Oct 2015 15:10:34 -0700
Subject: [PATCH] fix(tabs): tabs now work properly with `md-dynamic-height`
 and `md-align-tabs="bottom"`

Closes #4368
---
 src/components/tabs/js/tabsController.js | 11 +++++++++--
 src/components/tabs/tabs.scss            | 14 +++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/tabs/js/tabsController.js b/src/components/tabs/js/tabsController.js
index 2b6937a9ffd..162e133780a 100644
--- a/src/components/tabs/js/tabsController.js
+++ b/src/components/tabs/js/tabsController.js
@@ -628,17 +628,24 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
   function updateHeightFromContent () {
     if (!ctrl.dynamicHeight) return $element.css('height', '');
     if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);
+
     var tabContent    = elements.contents[ ctrl.selectedIndex ],
         contentHeight = tabContent ? tabContent.offsetHeight : 0,
         tabsHeight    = elements.wrapper.offsetHeight,
         newHeight     = contentHeight + tabsHeight,
-        currentHeight = $element.prop('clientHeight');
+        currentHeight = $element.prop('offsetHeight');
+
+    if ($element.attr('md-align-tabs') === 'bottom') {
+      currentHeight -= tabsHeight;
+      newHeight -= tabsHeight;
+    }
+    if ($element.attr('md-border-bottom') !== undefined) ++currentHeight;
     if (currentHeight === newHeight) return;
 
     // Lock during animation so the user can't change tabs
     locked = true;
 
-    var fromHeight = { height: currentHeight + 'px'},
+    var fromHeight = { height: currentHeight + 'px' },
         toHeight = { height: newHeight + 'px' };
 
     // Set the height to the current, specific pixel height to fix a bug on iOS where the height
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 8e2baf4d315..a8b83941ac9 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -3,15 +3,9 @@ $tabs-tab-width: $baseline-grid * 12 !default;
 $tabs-header-height: 48px !default;
 
 @keyframes md-tab-content-hide {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
+  0% { opacity: 1; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
 }
 
 md-tab-data {
@@ -35,12 +29,14 @@ md-tabs {
     min-height: 200 + $tabs-header-height;
   }
   &[md-align-tabs="bottom"] {
+    padding-bottom: $tabs-header-height;
     md-tabs-wrapper {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: $tabs-header-height;
+      z-index: 2;
     }
     md-tabs-content-wrapper {
       top: 0;