Skip to content

Commit

Permalink
fix(material-experimental/mdc-select): panel losing max-height if men…
Browse files Browse the repository at this point in the history
…u is opened after select (#21341)

If an MDC-based `mat-menu` is opened after a `mat-select`, the select will lose
its `max-height`, because its selector specificity is too low and it gets overwritten
by the menu which uses the same set of mixins.

These changes resolve the issue by increasing the specificity.
  • Loading branch information
crisbeto committed Dec 17, 2020
1 parent eb32025 commit c530067
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/material-experimental/mdc-select/select.scss
Expand Up @@ -68,7 +68,9 @@ $scale: 0.75 !default;
margin: 0 $mat-select-arrow-margin;
}

.mat-mdc-select-panel {
// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
// and avoid interference with `mat-menu` which uses the same mixins from MDC.
.mdc-menu-surface.mat-mdc-select-panel {
width: 100%; // Ensures that the panel matches the overlay width.
max-height: $mat-select-panel-max-height;
position: static; // MDC uses `absolute` by default which will throw off our positioning.
Expand Down

0 comments on commit c530067

Please sign in to comment.