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)
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
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
This works for me! 🆗
html:
scss:
@vaishalichawla26 @daicoden
I think flex-grow should be prefered. Otherwise it’s as of now the only solution that worked for me.
Cheers!
The following also works for me (same as above without important).
Angular docs says /deep/ is deprecated, what’s the alternative to deep?
@RobJacobs could you make a pull request with your fix?
Following change help me sort my issue:-
/deep/.mat-tab-body-wrapper{ height: 100%!important; }
@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:
Tested on my iPhone - os10.3.2. SO links for reference: link, link
Is there any reason why the PR hasn’t still been merged after 5 months?