md-tab-group tabs should be able to contain scroll-able components

[sherwopj]

Bug, feature request, or proposal:

Bug/Feature Request

What is the expected behavior?

Elements within an md-tab of an md-tab-group should be independently scroll-able. nav tabs (md-tab-nav-bar) do allow independently scroll-able contents

What is the current behavior?

scroll is only possible for the whole tab

What are the steps to reproduce?

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

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

A tab could fill screen real estate but contain multiple lists of data. It would be useful to be able to freeze a list header (containing a search input say) and allow the rest of the list to be scrollable.

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

@angular/cli: 1.0.0-beta.31
node: 7.2.0
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/compiler-cli: 2.4.7
@angular/core: 2.4.7
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31

Is there anything else we should know?

Like your work :)

[andrewseguin]

Changed height to 100% for the content so that you can match it with your elements. Let me know if this is what you are expecting:

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

[sherwopj]

Thanks for looking into it old bean. How on earth did you discover that:

.mat-tab-body-content { height: 100%; }

would do the trick? Chrome devtools? Inspecting, snooping, inferring?

Is this solution a workaround?

Cheers

[andrewseguin]

Lots of experience in dealing with height issues :) I used Chrome devtools to see that the mat-tab-body-content element was not fixing its height to the height of its parent, which means its children will not be able to infer anything about the tab height.

[angular-automatic-lock-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.}