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.

(cherry picked from commit c530067)
  • Loading branch information
crisbeto authored and mmalerba committed Dec 17, 2020
1 parent 3889bf4 commit 8714cd5
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/material-experimental/mdc-select/select.scss
Original file line number Diff line number Diff line change
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 8714cd5

Please sign in to comment.