src/components/tabs/js/tabsController.js
function updateHeightFromContent () {
    if (!ctrl.dynamicHeight) return $element.css('height', '');
    if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);

    var elements = getElements();

    var tabContent    = elements.contents[ ctrl.selectedIndex ],
        contentHeight = tabContent ? tabContent.offsetHeight : 0,
        tabsHeight    = elements.wrapper.offsetHeight,
        newHeight     = contentHeight + tabsHeight,
        currentHeight = $element.prop('clientHeight');

    if (currentHeight === newHeight) return;

    // Adjusts calculations for when the buttons are bottom-aligned since this relies on absolute
    // positioning.  This should probably be cleaned up if a cleaner solution is possible.
    if ($element.attr('md-align-tabs') === 'bottom') {
      currentHeight -= tabsHeight;
      newHeight -= tabsHeight;
      // Need to include bottom border in these calculations
      if ($element.attr('md-border-bottom') !== undefined) {
        ++currentHeight;
      }
    }

    // Lock during animation so the user can't change tabs
    locked = true;

    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
    // first animates to 0, then back to the proper height causing a visual glitch
    $element.css(fromHeight);

    // Animate the height from the old to the new
    $animateCss($element, {
      from: fromHeight,
      to: toHeight,
      easing: 'cubic-bezier(0.35, 0, 0.25, 1)',
      duration: 0.5
    }).start().done(function () {
      // Then (to fix the same iOS issue as above), disable transitions and remove the specific
      // pixel height so the height can size with browser width/content changes, etc.
      $element.css({
        transition: 'none',
        height: ''
      });

      // In the next tick, re-allow transitions (if we do it all at once, $element.css is "smart"
      // enough to batch it for us instead of doing it immediately, which undoes the original
      // transition: none)
      $mdUtil.nextTick(function() {
        $element.css('transition', '');
      });

      // And unlock so tab changes can occur
      locked = false;
    });
  }
function updateHeightFromContent () {
    if (!ctrl.dynamicHeight) return $element.css('height', '');
    if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);

    var elements = getElements();

    var tabContent    = elements.contents[ ctrl.selectedIndex ],
        contentHeight = tabContent ? tabContent.offsetHeight : 0,
        tabsHeight    = elements.wrapper.offsetHeight,
        newHeight     = contentHeight + tabsHeight,
        currentHeight = $element.prop('clientHeight');

    if (currentHeight === newHeight) return;

    // Adjusts calculations for when the buttons are bottom-aligned since this relies on absolute
    // positioning.  This should probably be cleaned up if a cleaner solution is possible.
    if ($element.attr('md-align-tabs') === 'bottom') {
      currentHeight -= tabsHeight;
      newHeight -= tabsHeight;
      // Need to include bottom border in these calculations
      if ($element.attr('md-border-bottom') !== undefined) {
        ++currentHeight;
      }
    }

    // Lock during animation so the user can't change tabs
    locked = true;

    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
    // first animates to 0, then back to the proper height causing a visual glitch
    $element.css(fromHeight);

    // Animate the height from the old to the new
    $animateCss($element, {
      from: fromHeight,
      to: toHeight,
      easing: 'cubic-bezier(0.35, 0, 0.25, 1)',
      duration: 0.5
    }).start().done(function () {
      // Then (to fix the same iOS issue as above), disable transitions and remove the specific
      // pixel height so the height can size with browser width/content changes, etc.
      $element.css({
        transition: 'none',
        height: ''
      });

      // In the next tick, re-allow transitions (if we do it all at once, $element.css is "smart"
      // enough to batch it for us instead of doing it immediately, which undoes the original
      // transition: none)
      $mdUtil.nextTick(function() {
        $element.css('transition', '');
      });

      // And unlock so tab changes can occur
      locked = false;
    });
  }
function updateHeightFromContent ( ) { if ( ! ctrl . dynamicHeight ) return $element . css ( 'height' , '' ) ; if ( ! ctrl . tabs . length ) return queue . push ( updateHeightFromContent ) ; var elements = getElements ( ) ; var tabContent = elements . contents [ ctrl . selectedIndex ] , contentHeight = tabContent ? tabContent . offsetHeight : 0 , tabsHeight = elements . wrapper . offsetHeight , newHeight = contentHeight + tabsHeight , currentHeight = $element . prop ( 'clientHeight' ) ; if ( currentHeight === newHeight ) return ; // Adjusts calculations for when the buttons are bottom-aligned since this relies on absolute // positioning.  This should probably be cleaned up if a cleaner solution is possible. if ( $element . attr ( 'md-align-tabs' ) === 'bottom' ) { currentHeight -= tabsHeight ; newHeight -= tabsHeight ; // Need to include bottom border in these calculations if ( $element . attr ( 'md-border-bottom' ) !== undefined ) { ++ currentHeight ; } } // Lock during animation so the user can't change tabs locked = true ; 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 // first animates to 0, then back to the proper height causing a visual glitch $element . css ( fromHeight ) ; // Animate the height from the old to the new $animateCss ( $element , { from : fromHeight , to : toHeight , easing : 'cubic-bezier(0.35, 0, 0.25, 1)' , duration : 0.5 } ) . start ( ) . done ( function ( ) { // Then (to fix the same iOS issue as above), disable transitions and remove the specific // pixel height so the height can size with browser width/content changes, etc. $element . css ( { transition : 'none' , height : '' } ) ; // In the next tick, re-allow transitions (if we do it all at once, $element.css is "smart" // enough to batch it for us instead of doing it immediately, which undoes the original // transition: none) $mdUtil . nextTick ( function ( ) { $element . css ( 'transition' , '' ) ; } ) ; // And unlock so tab changes can occur locked = false ; } ) ; }
Calculates the content height of the current tab.
@returns {*}
Calculates the content height of the current tab .