Components: md-tab-content how to take 100% of height

[RicardoVaranda]

Can someone let me know what the easiest way to make the content of a tab take up 100% of the available height.

Currently its taking the min-height of the md-tab-group which is 248px.

Thank you :smile:

[alsami]

md-tab{
height: 100vh !important;
}

not working? Or something alike?

[RicardoVaranda]

I'd rather not have to use the !important flag if possible, I know material is using flex system just wondering if there's a way to do it using hat.

[alsami]

You can use it as seperate style for just a specific component. It will then only be in that component.

[robertmesserle]

This issue was from an earlier version, and should have been resolved already. I just confirmed that adding md-tab-group { height: 100%; } appears to work. Please let me know if there are cases where this doesn't work by providing a demo so that I can resolve the issue.

[Xample]

@robertmesserle only adding height 100% was not working
I had to cheat with shadow piercing:
http://plnkr.co/edit/UG6VhKWovNKL4lHX7TxB?p=preview

i.e.

  md-tab-group {
    /deep/ .mat-tab-body-wrapper {
      height: 100%;
    }
  }

[ThomasEWilson]

I tried a number of fixes from a couple of different posts.
This is what worked for me.

.mat-tab-group{
    height: 100%;
}
.mat-tab-body-wrapper {
    flex-grow: 1;
}

.mat-tab-body {
    display: flex !important;
    flex-direction: column;
}

.mat-tab-body-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

If you have a component inside the tab, then also set a css class like so:

.component{ height: 100%; }

[shlomiassaf]

This is not that tricky, the 2 things that make it look complex are angular's shadow emulation and flexbox, both are not widely understood yet.

TL;DR

The only thing required:

.mat-tab-body-wrapper {
  flex: 1 1 100%;
}

Because most pages are built under CSS shadow emulation mode (default mode) the above
will not work because .mat-tab-body-wrapper does not exist in the template of the page, it's in the template of mat-tab-group.

2 solutions:

(1) Using shadow dom's ::ng-deep

::ng-deep .mat-tab-body-wrapper {
  flex: 1 1 100%;
}

This will fix the issue but in the long run, it's not recommended because ::ng-deep is deprecated and who knows what will replace it... track #23636 for more information.

(2) Using global scope (css)

.mat-tab-group.mat-tab-fill-height .mat-tab-body-wrapper {
    flex: 1 1 100%;
 }

This should be put in the global CSS file, it will apply a full height every time the CSS class is used

<mat-tab-group class="mat-tab-fill-height">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Notes:

The structure of a renderer tab component is different from how it is declared, the example above is a simple declaration that will be rendered like this:

<mat-tab-group class="mat-tab-group">
  <mat-tab-header class="mat-tab-header"><!-- HEADERS HERE--></mat-tab-header>
  <div class="mat-tab-body-wrapper">
    <mat-tab-body class="mat-tab-body" role="tabpanel">
      <div class="mat-tab-body-content"><!-- TAB CONTENT HERE --></div>
    </mat-tab-body>
    <!-- MORE TAB BODIES... -->
  </div>
</mat-tab-group>

mat-tab-group is a flexbox (display: flex) with column layout, effectivly having 2 columns.
The headers and the body. We need the body to fill the remaining height left, i.e. the height
of the mat-tab-group minus the header's row.

I'm not focusing on the height of mat-tab-group because it's not relevant, it can be controlled from a page template and the dev will set it... either relative (%) or fixed (px)

---

Of course, there are other solutions, using angular directive to programmatically apply this and any other creative things you might think of.

Personally, I like (2), more specifically I don't even use the special class, I apply it on ALL tabs I use.
I don't see why it shouldn't be the default behavior of the tab component.

If the developer doesn't want it, using a simple wrapper will do.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}