CODEWITHSUNDEEP
angular-material
Ejiro Pinnock
Ejiro Pinnock

Reputation: 169

AngularJS Material Tab height issue

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.

Upvotes: 16

Views: 17284

Answers (5)

mahesh kendre
mahesh kendre

Reputation: 1

<md-tabs  class="md-primary" md-selected="leadDetailsTab" md-dynamic-height>
 <md-tab label="First tab">
    <div ng-include="'/src/widgets/test.html'"></div>
 </md-tab>
 <md-tab label="Second tab">
    <h1>Second tab data</h1>            
 </md-tab>

Upvotes: 0

yar1
yar1

Reputation: 1351

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');
    };
}

Upvotes: 4

Christopher Mahl
Christopher Mahl

Reputation: 361

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>

Upvotes: 27

nitin
nitin

Reputation: 3787

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>

Upvotes: 0

fisch2
fisch2

Reputation: 2783

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).

Upvotes: 0

Related Questions