md-tabs displaying only 200px

[fant0m]

It started working weird. Previously height of md-tabs-content-wrapper was changing depending on tab height. Now it's still only 200px so I can't see full content of tab.

// using chrome, haven't tested other browsers yet

[robertmesserle]

@ThomasBurleson This was the situation we discussed last week. I think we need a way to support both scenarios. Something like an attribute like md-content-size to allow users to specify if the size logic should be based on the content size. This can also allow the content area to stretch based on changing content on tab change. Thoughts?

[Frank3K]

Also facing this issue on Firefox 36.0.4 on Ubuntu 14.10.

[fant0m]

@robertmesserle ye it would be better if it's going to work like it used to. So size will be dynamically changing depending on the current tab's height

[robertmesserle]

@fant0m Master has been updated to include the attribute md-dynamic-height - when present, the tabs container will animate to the size of each tab as you cycle through them. Please let me know if this matches what you expected, or if there is anything else that can be improved with the way this functions.

Note: There is still a minimum height of 200px present for content (tabs min-height of 248px). I'm considering ways to remove this without impacting the existing functionality, but for now, just wanted you to be aware of it.

[ngraef]

@robertmesserle This seems to have broken the source tabs on the demo site (and in my project) with a $compile:nonassign error.

[robertmesserle]

@ngraef That should have been fixed by 73cf7a7aa261122bd6f5b5f0033c8657c2533085

[ngraef]

@robertmesserle Yup, my comment was a few minutes before that commit. Thanks for the quick fix!

[hodeyp]

hi - there is still an issue here i'm afraid. The dynamic height attribute does make the tabs scale but you cannot include an md-content scrollable region within the tab. As far as I can see, the md-tab-content style fills the parent container and the parent container has an overflow:hidden. Net effect is the md-content div does not size correctly and allow scrolling.

[robertmesserle]

Can you post a codepen demo ago that I can see the issue? On Wed, Apr 1, 2015 at 12:17 AM hodeyp notifications@github.com wrote:

hi - there is still an issue here i'm afraid. The dynamic height attribute does make the tabs scale but you cannot include an md-content scrollable region within the tab. As far as I can see, the md-tab-content style fills the parent container and the parent container has an overflow:hidden. Net effect is the md-content div does not size correctly and allow scrolling.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/2088#issuecomment-88376262.

[hodeyp]

http://plnkr.co/edit/LFk0aZ?p=preview

There is a workaround I have discovered during creating the plunker which is to wrap the md-tabs in an md-content to enable scrolling. However this means the tab headers scroll also, ideally the tabs would remain visible and the content of the tab itself would scroll. An md-content within the md-tab-template wrapper has no effect.

[fant0m]

@robertmesserle I'm sorry but nothing has changed, it's still not working for me

[robertmesserle]

@hodeyp I am not entirely sure how you expect this to work or what you are trying to accomplish. You have md-dynamic-height set, so it would appear that you wanted shrink/grow per content, as demonstrated here:

http://codepen.io/robertmesserle/pen/KwYzKv

In this case, your content is WAY too long to fit in one screen without scrolling, so it is unlikely that this is desired.

I suspect what you want is something like this:

http://plnkr.co/edit/f9wa6y36KFID0RZAroeK?p=preview

I had to add some CSS to get this working, but I am working on a fix for that right now.

[robertmesserle]

I added a fix to master. Please let me know if you are still seeing issues with this.

If you really did want it to stretch to fit the content, this could be accomplished as well, but your flex layout was preventing it from working properly. Let me know if you need a sample of that as well.

[hodeyp]

looking at the amended plunker, this is not quite what I was hoping to achieve. I still want each tab to automatically adjust its height to fit the content, but to limit the expansion to the height of the parent container, which in the case was a contrived flex="50".

CSS is not my strong point so you may be able to show me how to do this easily!

[hodeyp]

http://plnkr.co/edit/gToVlaP5sEZUNDXkVCig?p=preview is a better example of what the target layout is

[robertmesserle]

Hm, so what you want is for the stretch functionality to respect a maximum height. Would it make sense for me to add a check for a max-height style being applied to the md-tabs element, and if present, include that in my math along with a scrollbar? That seems like the best approach here to me.

[hodeyp]

How about checking the height of the parent container element and using that as the max-height? That way the parent can be a flex element taking up a variable height depending on window size. So dynamic tab height = min(tabContentHeight,parentContainerHeight), and then watch for changes in ParentContainerHeight to resize accordingly.

[robertmesserle]

That's an issue, though - in your example, the parent container (div.md-whiteframe-z1) resizes with the content, so that would give inaccurate numbers as well. I'm not sure this is something that will be easily solvable within the Angular Material codebase, and may have to be handled on an individual level.

[hodeyp]

good point! how about instead of looking for a max-height style you add an md-maxheight attribute that when used in conjunction with md-dynamicheight limits the dynamic height and adds a scrollbar? it feels a bit more polished than just looking for a style attribute.

[hodeyp]

actually, thinking about it a bit further, the example plunker parent does resize with content but that itself stops resizing when the container fills the available space so there must be something that causes it to stop expanding. Is this something that could be used?

[robertmesserle]

Yea, I had a thought about doing a check along those lines. It probably won't end up in 0.9.0, but I'd like to look into ways to do this because it does seem valuable.

[darek]

@robertmesserle md-dynamic-height works ok but. If my first tab is dynamicaly loaded by ng-include then after loading page my first tab content is cutted after first 200px, i need to switch tab to another and then return to first one to see whole content.

[ngraef]

@darek see #2177.

[robertmesserle]

This is being worked on right now, BTW. On Fri, Apr 10, 2015 at 10:50 AM Nick Graef notifications@github.com wrote:

@darek https://github.com/darek see #2177 https://github.com/angular/material/issues/2177.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/2088#issuecomment-91635445.

[darek]

@robertmesserle great :+1:

[Seiifer]

md-dynamyc-height removes the scrollbar for me. :(

[EndymionUSA]

@Seiifer I'm experiencing the same issue.

[Seiifer]

@EndymionUSA I fixed it, I think by setting a height to the <md content>

[jmls]

@Seiifer : could you show an example ? thanks - I have the same problem

[Seiifer]

@jmls Well, you just need to add a height attribut to your <md-content> in order to have the scroll bar.

It worked for me :

<md-content class="control-sidebar-dark sideSearch" ng-style="{'height' : menuHeight}">
<!-- ... -->

[jmls]

is menuHeight a property in your controller ? if so, how do you know how hight to set it ? And what happens on a window resize?

[Seiifer]

That's just for me because I wanna handle different size for the menu. You don't need a variable there. Afaik

[NenadP]

md-dynamic-height="true"

seems to do the trick, but with huge tab content, transitions are choppy, as it tries to slide and to animate height in the same time. For me workaround to this was to disable height animation.

md-tabs {
    transition: 0s !important;
}

[luishmcmoreno]

md-dynamic-height scrolls tabs. There is a trick to scroll only md-tab-body?

[debuggerpk]

as @luishmcmoreno says: md-dynamic-height scrolls tabs. is there a trick to scroll only md-tab-body?

[vapits]

+1

7838

[adam-s]

+1 With md-dynamic-height the overflow on the y axis is hidden and can't be scrolled. Without md-dynamic-height the tab size is 200px. Is there a known solution to this?

[yarsh]

See a (somewhat hacky) solution for full-height md-tabs here: http://stackoverflow.com/questions/30314441/angularjs-material-tab-height-issue/37856853#37856853

[thatisuday]

md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 100%;
}

And working fine

[PusitK]

@thatisuday doesn't work for me,all tab content disappear

[thatisuday]

@PusitK That may be because its parent container has 0px height.

[pdonorio]

Thanks @thatisuday your fix worked for me, by also setting the height to the md-tabs parent.