Skip to content

Commit a7e41fc

Browse files
committed
fix(material/tabs): prevent tab header from collapsing when empty inside a drop list
Adds a `min-height` to the tab header when it is placed inside a drop list. This is useful when dragging between connected lists since the header may collapse when it has no tabs.
1 parent f509e53 commit a7e41fc

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

src/material/tabs/_tabs-common.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,18 @@ $mat-tab-animation-duration: 500ms !default;
393393
[mat-align-tabs='end'] > #{$parent} & {
394394
justify-content: flex-end;
395395
}
396+
397+
// Prevent the header from collapsing when it is a drop list. This is useful,
398+
// because its height may become zero once all the tabs are dragged out.
399+
.cdk-drop-list &,
400+
&.cdk-drop-list {
401+
@include token-utils.use-tokens(
402+
tokens-mdc-secondary-navigation-tab.$prefix,
403+
tokens-mdc-secondary-navigation-tab.get-token-slots()
404+
) {
405+
@include token-utils.create-token-slot(min-height, container-height);
406+
}
407+
}
396408
}
397409

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

0 commit comments

Comments
 (0)