Components: MatTabGroup height is always dynamic

[benelliott]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

According to the documentation,

By default, the tab group will not change its height to the height of the currently active tab. To change this, set the dynamicHeight input to true. The tab body will animate its height according to the height of the active tab.

What is the current behavior?

As far as I can tell, the height of the mat-tab-group element is _always_ dynamically set according to the height of the currently active tab. The only difference is that when dynamicHeight = true there is a smooth height transition when switching tabs. What I want in my own app is for the height of the group to be fixed and for the content to scroll when necessary, which I assumed would be the case if dynamicHeight = false. Maybe I am misunderstanding the documentation - if so then I think its meaning should be clarified.

What are the steps to reproduce?

Here is a plunkr showing what I mean: http://plnkr.co/edit/gI0A56uTDzoLjYAosbDR?p=preview

Toggle the dynamicHeight property using the slide toggle. The height of the md-tab-group element will change regardless of the value of this property.

What is the use-case or motivation for changing an existing behavior?

Implementation should be aligned with documentation or documentation should be unambiguous.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3/Master, Material beta 11/Master, Windows 10, Chrome 61

Is there anything else we should know?

[josephperrott]

If you you would like to have dynamicHeight=false and prevent resizing of the mat-tab-group, you will need to set a specific height for the mat-tab-group. Without the height being set, the browser will expand the element to contain the contents.

With dynamicHeight=true, the expectation is that it will be resizing throughout use. The component provides a transition animation and adds overflow-y: hidden to the mat-tab-body as it should not enter a scrollable state when changing.

[benelliott]

@josephperrott Thanks, but I still don't fully understand - if I set a height on mat-tab-group then the height will be fixed regardless of dynamicHeight: http://plnkr.co/edit/bGCrpkHQGnmrnjLPY7wU?p=preview

[josephperrott]

Correct, dynamicHeight does not make it dynamic as much as it handles the animations for it being dynamic. I think of it as being a marker for telling the tab group _it is_ dynamic rather than telling it that it _should be_ dynamic.

[josephperrott]

Closing as this is working as expected.

[benelliott]

@josephperrott If this is the intended behaviour, why would you ever want to set it to false? I still don't think the documentation of this property really aligns with the implementation. The line

By default, the tab group will not change its height to the height of the currently active tab.

quite strongly suggests to me that the tab group's height will be static _unless_ dynamicHeight is true.

[willshowell]

Agreed, there is an inconsistency between the following

1. Overview description

   Dynamic Height

   By default, the tab group will not change its height to the height of the currently active tab. To change this, set the dynamicHeight input to true. The tab body will animate its height according to the height of the active tab.

2. API reference

   dynamicHeight | Whether the tab group should grow to the size of the active tab.

3. @benelliott's plunker

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

IMO, the behavior makes sense per @josephperrott's explanation (particularly the no overflow part), but the docs suggest a different behavior.

[simeyla]

If this is the intended behaviour, why would you ever want to set it to false

If you don't want it to animate and want an instantaneous jump.

This property is still badly named and badly documented. What we often need is matchHeights or equalizeHeights or normalizeHeights or something to that effect.

That's not what this is. This is animateHeight and that's all this is.

[makuc]

If this is the intended behaviour, why would you ever want to set it to false

If you don't want it to animate and want an instantaneous jump.

This property is still badly named and badly documented. What we often need is matchHeights or equalizeHeights or normalizeHeights or something to that effect.

That's not what this is. This is animateHeight and that's all this is.

But then it should be renamed as such (though I guess that's pointless by this point, backward compatibility and all that). This isn't dynamicHeight, it is animatedHeight.

And the docs must be fixed to reflect that, at least.

[justin-giovanetti]

yea, the whole thing just seems weird.
If you want to animate, then you want it to animate right.

It should be called: heySoThePageDoesNotGetJackedUpForASplitSecondIncludeThisPieceOfCode

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}