Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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