display: flex on .md-tab-body-wrapper is causing problems

[fxck]

It causes this..

..any inner content is only as wide as need be.. which is not something you usually want. Is there any particular reason for that flex? Can't it be just block, which would solve it?

[jelbourn]

Yeah, I would consider this a bug.

[Salma7amed]

the md-tab-body-wrapper and md-tab-body overflow is causing a problem. It hides the dropdown menu.

[andrewseguin]

I don't believe this is a problem anymore. There have been a good amount of changes made recently to how tab content is created.

Here's an example of tabs with simple text bodies that span the width of the tab group.
http://plnkr.co/edit/pEqGa6YwmTE2fxBDEGJf?p=preview

Please reopen if you can reproduce the issue.

[fxck]

What @Salma7amed said still is not fixed #1416 (comment) there are overflows set that are causing the content to be clipped, for example when you use md-card inside a tab content, shadows are clipped.

@andrewseguin

[fxck]

See http://plnkr.co/edit/29KyvgWew3qktBFhTIZM?p=preview

[JacobBrandt]

@fxck Can you please reopen this? This is still an issue as your plnkr clearly demonstrates.

[fxck]

Don't have the option.

[JacobBrandt]

@fxck Ah ok.
I'm going to tag @andrewseguin since he closed it. Hopefully he has the power to open it for you.

[andrewseguin]

Just to make sure I'm capturing the right issue here, I'll run through what has been discussed.

This issue began as the body wrapper not spanning the width of the tabs. That appears fixed.

The second issue presented is that dropdown menus do not overflow correctly. It appears that is because the menu overlay was placed within the tab. MdSelect does not have this issue since the overlay is placed on the page body.

The third issue seems to be that the md-card does not show shadows when the card's width and height matches the width and height of the tab. I'm not sure I understand the requested behavior. Do you want the shadows to extend beyond the bottom and sides of the tab?

Here's a plunker we can use as a template for this discussion: https://plnkr.co/edit/Zf4mLF1iTiosrmMo0wkr?p=preview

Note that my goal here is to close this issue after we figured out if a new issue should be created based on this discussion. This thread has already diverted away from the original issue.

[JacobBrandt]

@andrewseguin I agree. I think new issues should be created.

MdSelect does not have this issue since the overlay is placed on the page body.

Thanks for explaining this. I realize now why part of my content in the tab was not displaying properly. With the current bug for MdSelect #2124 I had to create a hybrid approach of using polymer components with angular 2. Alas this caused me problems since the paper-dropdown-menu doesn't put the overlay on the body but within its parent component. Thus with an overflow of hidden I didn't see all my options. I don't really know a good work around for this right now except for changing the encapsulation in my parent component to None so I can modify the tab styles to not overflow.

[andrewseguin]

Encapsulation set to None is one option, there are two others.

1. Use /deep/ in your CSS selectors
2. Use a global style sheet that is loaded outside of Angular (not a part of any styleUrls).

Closing the issue now since there is no activity, but please feel free to open it back up if there are any remaining issues that cannot be resolved. Just please use the issue template, it helps us tremendously :)

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