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

ryanjackman opened this Issue Jan 9, 2019 · 1 comment


None yet
2 participants
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?

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.


This comment has been minimized.

Copy link

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