components: [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?

About this issue

Original URL
State: open
Created 7 years ago
Comments: 18 (8 by maintainers)

Most upvoted comments

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

RobJacobs on Jun 13, 2017

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

ooow on Feb 1, 2019

@vaishalichawla26 @daicoden

I think flex-grow should be prefered. Otherwise it’s as of now the only solution that worked for me.

Cheers!

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

Knacktus on Jun 18, 2018

The following also works for me (same as above without important).

::ng-deep .mat-tab-body-wrapper {
  height: 100%
}

Angular docs says /deep/ is deprecated, what’s the alternative to deep?

daicoden on Apr 23, 2018

@RobJacobs could you make a pull request with your fix?

reginbald on Jul 10, 2017

Following change help me sort my issue:-

/deep/.mat-tab-body-wrapper{ height: 100%!important; }

vaishalichawla26 on Jan 22, 2018

@andrewseguin I’ve had to add an absolute positioned element in my nested flexbox layouts when I wanted 100% height. This Plunk adds the fix you made and tweaks the mat-body-content class:

.mat-tab-body-wrapper {
  flex-grow: 1;
}
.mat-tab-body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Tested on my iPhone - os10.3.2. SO links for reference: link, link

RobJacobs on May 31, 2017

Is there any reason why the PR hasn’t still been merged after 5 months?

darkbasic on May 23, 2018