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

Hanzofm · 2017-05-16T14:20:26Z

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?

The text was updated successfully, but these errors were encountered:

andrewseguin · 2017-05-16T21:45:59Z

Closing since this is a question rather than an issue. Please feel free to ask our great community in other avenues such as StackOverflow or Gitter. Note that it will help if you re-create your template in a plunkr so others can assist you better.

Hanzofm · 2017-05-17T07:08:52Z

But In my opinion @andrewseguin it is more a problem than a question.

This is a plunker that recreate the problem

https://plnkr.co/edit/eyklxDVFbsxEnLKyCbi1?p=preview

And this is a screenshot of my custom problem

https://i.stack.imgur.com/8uDvd.png

The problem is that the content inside of a <md-tab> is not able to work with percentages when all other content yes

andrewseguin · 2017-05-17T21:07:39Z

Thanks for the example, I see that the problem is in the .mat-tab-body-wrapper which does not carry down information of the height to its children since it does not stretch the full height of it's parent.

Next time it definitely helps to follow the issue template and provide reproduction steps. Otherwise it's harder for us to know what is being described and how to replicate it.

Fix has been made in #4631

andrewseguin · 2017-05-19T20:42:37Z

Sorry for the bad news, but it looks like we'll need to dig deeper into coming up with a solution. Safari doesn't quite match the flexbox spec and translate height down correctly to children.

This would be a great bug for community contribution

Hanzofm · 2017-05-27T08:35:23Z

Thanks for your work!

RobJacobs · 2017-05-31T00:25:29Z

@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 · 2017-05-31T13:50:59Z

Did some digging, it seems PR #1788 introduced this issue, In the tab-group.scss, the flex-grow: 1 was removed from the mat-tab-body-wrapper class and the mat-tab-body-active class was introduced which sets the position: relative. This overrides the position: absolute on the mat-tab-body class which comes from the mat-fill include.

KeTr · 2017-06-13T11:44:40Z

@RobJacobs I played around with the problem and your solution and as soon as the div actually contains content, I get weird behavior with the absolute positioning. Here's your Plunk with content. Notice the Scrollbar, that's not supposed to be there.

When I set the absolute positioning onto the div with the height:100% style it's fixed. See here.

I have no idea if this helps anyone, but I just wanted to bring it up.

RobJacobs · 2017-06-13T16:11:57Z

@KeTr Not sure what's going on with the p element, but that's what is causing the scroll bars to appear. The user-agent style adds a 16px margin top and bottom to p elements and for some reason that is leaking out to the parent div. I created another plunk that abstracts the classes/styles to help diagnose the issue.

RobJacobs · 2017-06-13T19:44:14Z

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

reginbald · 2017-07-10T11:31:27Z

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

vaishalichawla26 · 2018-01-22T05:10:01Z

Following change help me sort my issue:-

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

daicoden · 2018-04-23T20:57:33Z

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?

saulotoledo · 2018-05-19T15:17:33Z

@andrewseguin @mmalerba If @CDDelta is working here I suggest to add the "has pr" label to this issue.

darkbasic · 2018-05-23T19:00:59Z

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

Knacktus · 2018-06-18T10:17:26Z

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

ooow · 2019-02-01T12:58:18Z

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

viniciusschuelter · 2022-08-12T00:13:02Z

@andrewseguin according to your answer #15839 (comment) does this issue still make sense?

Hanzofm mentioned this issue May 16, 2017

PlaceHolder on empty mdInput not showing correctly after update to Beta 5 #4586

Closed

andrewseguin self-assigned this May 16, 2017

andrewseguin closed this as completed May 16, 2017

andrewseguin mentioned this issue May 17, 2017

fix(tabs): allow height 100% in tab content #4631

Closed

andrewseguin reopened this May 17, 2017

andrewseguin added the has pr label May 19, 2017

andrewseguin added help wanted The team would appreciate a PR from the community to address this issue and removed has pr labels May 19, 2017

andrewseguin added the md-tabs label Jul 15, 2017

andrewseguin changed the title ~~md-tab doen't gives height=100% to give all height of md-tab-group~~ [Tbas] Md-tab height: 100% does not give all height of group Oct 19, 2017

andrewseguin added P4 A relatively minor issue that is not relevant to core functions and removed mat-tabs labels Oct 19, 2017

andrewseguin changed the title ~~[Tbas] Md-tab height: 100% does not give all height of group~~ [Tabs] Md-tab height: 100% does not give all height of group Nov 21, 2017

CDDelta mentioned this issue Jan 1, 2018

fix(tabs): scale the contents of mat-tab-group to the group's height #9180

Closed

CDDelta mentioned this issue May 26, 2018

fix(tabs): scale tabs to the height of tab group #11520

Closed

iamstiil mentioned this issue Apr 16, 2019

fix: force tab-body-wrapper to fill parent #15839

Closed

jelbourn added the area: material/tabs label May 26, 2020

andrewseguin removed their assignment Jun 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Hanzofm commented May 16, 2017 •

edited

Loading

andrewseguin commented May 16, 2017

Hanzofm commented May 17, 2017

andrewseguin commented May 17, 2017

andrewseguin commented May 19, 2017

Hanzofm commented May 27, 2017

RobJacobs commented May 31, 2017 •

edited

Loading

RobJacobs commented May 31, 2017

KeTr commented Jun 13, 2017

RobJacobs commented Jun 13, 2017

RobJacobs commented Jun 13, 2017 •

edited

Loading

reginbald commented Jul 10, 2017

vaishalichawla26 commented Jan 22, 2018

daicoden commented Apr 23, 2018

saulotoledo commented May 19, 2018

darkbasic commented May 23, 2018

Knacktus commented Jun 18, 2018 •

edited

Loading

ooow commented Feb 1, 2019

viniciusschuelter commented Aug 12, 2022

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

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

Comments

Hanzofm commented May 16, 2017 • edited Loading

andrewseguin commented May 16, 2017

Hanzofm commented May 17, 2017

andrewseguin commented May 17, 2017

andrewseguin commented May 19, 2017

Hanzofm commented May 27, 2017

RobJacobs commented May 31, 2017 • edited Loading

RobJacobs commented May 31, 2017

KeTr commented Jun 13, 2017

RobJacobs commented Jun 13, 2017

RobJacobs commented Jun 13, 2017 • edited Loading

reginbald commented Jul 10, 2017

vaishalichawla26 commented Jan 22, 2018

daicoden commented Apr 23, 2018

saulotoledo commented May 19, 2018

darkbasic commented May 23, 2018

Knacktus commented Jun 18, 2018 • edited Loading

ooow commented Feb 1, 2019

viniciusschuelter commented Aug 12, 2022

Hanzofm commented May 16, 2017 •

edited

Loading

RobJacobs commented May 31, 2017 •

edited

Loading

RobJacobs commented Jun 13, 2017 •

edited

Loading

Knacktus commented Jun 18, 2018 •

edited

Loading