[Tabs] Md-tab height: 100% does not give all height of group

Hi,

I’m having problems to adjust content of a tab to 100% of height of md-tab-group

For example:

<md-tab-group style="background-color: lightblue; height: 100%">// this works all bk is blue
<md-tab label="Info" style="background-color: indianred; height: 100%">//not work
<div style="background-color: yellow; height: 100%"></div>//with % not work, with px works
</md-tab>
</md-tab-group>

My problem is that md-tab-group expands his height to total of height. But the atribute height of md-tab doesn’t fit to 100% of md-tab-group.

Because of that the content, even if I set the height to 100% it doesn’t fit to 100% of height

If I set thet height attribute of the <div> to for example 500px it works correctly

I have this problem since I added <!doctype html> to my index.html

Versions: Beta.5 Angular 4

What would be doing wrong?

Issue Analytics

State:
Created 6 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

9reactions

RobJacobscommented, Jun 13, 2017

I played around with this some more, my previous idea with absolute positioning broke the dynamic-tab-height implementation. The only way I’ve gotten this to work so far is by making all the child tab body containers flex. Adding

.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;
}

The important flag on the .mat-tab-body is to override the display: block style already existing on that class, obviously the real fix would replace the display: block and !important would not be needed. This also seems to fix the issue @KeTr uncovered using a ‘p’ element.

I also changed the inner div style from: height: 100% to: flex-grow: 1. plunk has been updated, tested on a Mac with OSX v 10.11.6 with Safari version 10.0.3

7reactions

ooowcommented, Feb 1, 2019

This works for me! 🆗

html:

<mat-tab-group id="group">
  <mat-tab label="Tab 1">
    <div class="tab-content-container"> Content 1</div>
  </mat-tab>   

  <mat-tab label="Tab 2">
     <div class="tab-content-container"> Content 2</div>
  </mat-tab>

  <mat-tab label="Tab 3">
     <div class="tab-content-container"> Content 3</div>
  </mat-tab>
</mat-tab-group>

scss:

#group {
  height: 100%; // Whole group height.

  ::ng-deep .mat-tab-body-wrapper {
    height: 100%; // Tabs body height. I also don't like ng-deep, but there is no other way :(
  }

  .tab-content-container {
    height: 100%;  // Content height.
  }
}