AngularJS Material Tab height issue

Question

I'm having some troube figuring things out with AngularJS Material, I was wondering if anyone knew why the folling piece of code:

<md-tabs layout-fill >

    <md-tab id="tab1">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>

            <md-list>
                <md-subheader class="md-no-sticky">3 line item</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">

                    <div class="md-list-item-text">
                        <h3>sdfs</h3>
                        <h4>sdfsd</h4>
                        <p>sdfsdf</p>
                    </div>
                </md-list-item>

            </md-list>
        </md-tab-body>
    </md-tab>

</md-tabs>

produces this on firefox.

and this on chrome.

sorry about not posting images directly I don't have enough reputation.

Answer 1

You need to pass attribute 'md-dynamic-height' to yr md-tabs directive. Below code will work fine.

  <md-content layout="column">
      <md-tabs md-dynamic-height flex>

        <md-tab id="tab1">
          <md-tab-label>Item One</md-tab-label>
          <md-tab-body>
            <md-list>
              <md-subheader class="md-no-sticky">3 line item</md-subheader>
              <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">
                <div class="md-list-item-text">
                  <h3>sdfs</h3>
                  <h4>sdfsd</h4>
                  <p>sdfsdf</p>
                </div>
              </md-list-item>
            </md-list>
          </md-tab-body>
        </md-tab>

        <md-tab id="tab2">
          <md-tab-label>Item Two</md-tab-label>
          <md-tab-body>
            <md-list>
              <md-subheader class="md-no-sticky">3 line item</md-subheader>
              <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">
                <div class="md-list-item-text">
                  <h3>sdfs</h3>
                  <h4>sdfsd</h4>
                  <p>sdfsdf</p>
                </div>
              </md-list-item>
            </md-list>
         </md-tab-body>
        </md-tab>

  </md-tabs>   
 </md-content>

Answer 2

I also Had a similar issue. Though md-dynamic-height solved it...

You can try using:

<md-tabs md-dynamic-height>
  <md-tab>
    <md-tab-label>Tab label</md-tab-label>
    <md-tab-body>
      <md-content>The tab content</md-content>
    </md-tab-body>
  </md-tab>
</md-tabs>

Answer 3

I don't think the layout-fill will work as you intend in this case because the md-tab specifies a header and content, whereas I think you want the content to expand to fill the parent.

You might want to try adding the md-dynamic-height option to the md-tabs directive which should force angular-material to set a consistent height to the tab(s).

Answer 4

If the issue you're trying to solve is that the tabs do not take up the full available height:

1. As far as I know, it's impossible to do this via existing md attributes (and I've spent hours researching this)

2. It will not be fixed by the team anytime soon (see comment from ThomasBurleson on June 10, 2016 here: https://github.com/angular/material/issues/2254)

3. Here is a way to fix this that worked for me:

   Make sure every parent element has layout="column" and layout-fill attributes (or layout-column and layout-fill classes). This includes <ng-outlet> if that's relevant for your use case.

IMPORTANT NOTE ABOUT CUSTOM COMPONENTS CREATED VIA COMPONENT ROUTER:

In my case my html structure is ng-outlet -> custom-component -> md-card -> md-tabs

I added layout="column" and layout-fill to <ng-outlet> and <md-card> and added layout="column" to <md-tabs>. However, I couldn't find a way to add them to <account-component> (because it's created dynamically by Angular) so what I ended up doing is adding this (somewhat hacky) code to my component controller (ES6 but should be understandable even if you write ES5):

import template from './account.html';

export const accountComponent = {
    template: template,
    controller: accountController,
};

/*@ngInject*/
function accountController (accountService) {
    this.data = accountService.getAccountData();

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/
    this.$routerOnActivate = function () { // nextRoute
        const classes = document.querySelector('account-component').classList;
        classes.add('layout-column');
        classes.add('layout-fill');
    };
}