Skip to content

Commit

Permalink
fix(material/tabs): prevent tab header from collapsing when empty ins…
Browse files Browse the repository at this point in the history
…ide 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.

(cherry picked from commit 92ab713)
  • Loading branch information
crisbeto committed Jul 16, 2024
1 parent f9cc120 commit 2e5e415
Showing 1 changed file with 14 additions and 0 deletions.
14 changes: 14 additions & 0 deletions src/material/tabs/_tabs-common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,20 @@ $mat-tab-animation-duration: 500ms !default;
[mat-align-tabs='end'] > #{$parent} & {
justify-content: flex-end;
}

// Prevent the header from collapsing when it is a drop list. This is useful,
// because its height may become zero once all the tabs are dragged out.
// Note that ideally we would do this by default, rather than only in a drop
// list, but it ended up being hugely breaking internally.
.cdk-drop-list &,
&.cdk-drop-list {
@include token-utils.use-tokens(
tokens-mdc-secondary-navigation-tab.$prefix,
tokens-mdc-secondary-navigation-tab.get-token-slots()
) {
@include token-utils.create-token-slot(min-height, container-height);
}
}
}

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

0 comments on commit 2e5e415

Please sign in to comment.