New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tabs] Styling cut off outside tab-group #14766

Closed
ryanjackman opened this Issue Jan 9, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@ryanjackman
Copy link

ryanjackman commented Jan 9, 2019

What is the expected behavior?

Element styling should not be cut off by tabs. It should be shown outside/over-top of the tab.

What is the current behavior?

Element styling (demonstrated here with shadows on buttons) is cut off past the edge of a tab. The styling is not cut off when the element is inside a card.
Styling includes at least shadows on buttons and highlight/ripple on checkboxes and radio buttons.

screen shot 2019-01-09 at 10 45 24 am

What are the steps to reproduce?

https://stackblitz.com/edit/angular-xqwk86

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

Angular ^7.0.1
Material ^7.0.1
Typescript ~3.1.3
Tested Chrome, Firefox, and Safari. Mac/Linux

Is there anything else we should know?

I tried to find a CSS solution with z-depth or overflow. I was unable to get it to work.
Workaround is to give content inside tabs enough margin so the styling can be seen without cutting off.

@andrewseguin

This comment has been minimized.

Copy link
Contributor

andrewseguin commented Jan 9, 2019

Thanks for the providing your feedback, but we don't agree that tab content should be able to cast shadows onto the labels or conceptually appear in a z-index above the labels.

The ideal solution here is to provide margin/padding to the tab content so that you don't see any clipping occur.

Note that this is the same issue with cards, where its content should have sufficient padding/margin so that it does not get clipped.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment