Skip to content

Commit

Permalink
fix(material/tabs): prevent tab header from collapsing when empty
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto committed Jul 11, 2024
1 parent d3a95ab commit 133e6dc
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/material/tabs/_tabs-common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,15 @@ $mat-tab-animation-duration: 500ms !default;
[mat-align-tabs='end'] > #{$parent} & {
justify-content: flex-end;
}

@include token-utils.use-tokens(
tokens-mdc-secondary-navigation-tab.$prefix,
tokens-mdc-secondary-navigation-tab.get-token-slots()
) {
// Prevent the header from collapsing when all the items are removed. This is useful
// if the tabs are set up with drag&drop and one of the lists is emptied out.
@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 133e6dc

Please sign in to comment.