Skip to content

Commit 92ab713

Browse files
authored
fix(material/tabs): prevent tab header from collapsing when empty inside a drop list (#29418)
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 f411903 commit 92ab713

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

src/material/tabs/_tabs-common.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,20 @@ $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+
// Note that ideally we would do this by default, rather than only in a drop
400+
// list, but it ended up being hugely breaking internally.
401+
.cdk-drop-list &,
402+
&.cdk-drop-list {
403+
@include token-utils.use-tokens(
404+
tokens-mdc-secondary-navigation-tab.$prefix,
405+
tokens-mdc-secondary-navigation-tab.get-token-slots()
406+
) {
407+
@include token-utils.create-token-slot(min-height, container-height);
408+
}
409+
}
396410
}
397411

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

0 commit comments

Comments
 (0)