Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
[Tabs] Styling cut off outside tab-group #14766
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.
What are the steps to reproduce?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
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.
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.