Skip to content

Commit 133e6dc

Browse files
committed
fix(material/tabs): prevent tab header from collapsing when empty
Adds a `min-height` to the header so it doesn't collapse when there are no tabs. This is useful when the tabs have drag&drop enabled.
1 parent d3a95ab commit 133e6dc

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

src/material/tabs/_tabs-common.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,15 @@ $mat-tab-animation-duration: 500ms !default;
393393
[mat-align-tabs='end'] > #{$parent} & {
394394
justify-content: flex-end;
395395
}
396+
397+
@include token-utils.use-tokens(
398+
tokens-mdc-secondary-navigation-tab.$prefix,
399+
tokens-mdc-secondary-navigation-tab.get-token-slots()
400+
) {
401+
// Prevent the header from collapsing when all the items are removed. This is useful
402+
// if the tabs are set up with drag&drop and one of the lists is emptied out.
403+
@include token-utils.create-token-slot(min-height, container-height);
404+
}
396405
}
397406

398407
// Structural styles for the element that wraps the paginated container's content.

0 commit comments

Comments
 (0)