Skip to content

Commit 05b7c72

Browse files
committed
fix(material/autocomplete): autocomplete panel top cut off in landscape mode
Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel listbox is cut off by the device screen when being viewed in landscape mode. This is because the CDK overlay does not adjust its size based on the screen constraints when triggered. Fixes b/284148377
1 parent e52d2a8 commit 05b7c72

File tree

2 files changed

+3
-8
lines changed

2 files changed

+3
-8
lines changed

src/material/autocomplete/autocomplete-trigger.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -883,7 +883,9 @@ export class MatAutocompleteTrigger
883883
const strategy = this._overlay
884884
.position()
885885
.flexibleConnectedTo(this._getConnectedElement())
886-
.withFlexibleDimensions(false)
886+
.withFlexibleDimensions(true)
887+
.withGrowAfterOpen(true)
888+
.withViewportMargin(8)
887889
.withPush(false);
888890

889891
this._setStrategyPositions(strategy);

src/material/autocomplete/autocomplete.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,3 @@ div.mat-mdc-autocomplete-panel {
5454
mat-autocomplete {
5555
display: none;
5656
}
57-
58-
// Prevents autocomplete panel from being cut-off from being viewed in landscape orientation.
59-
@media all and (orientation: landscape) {
60-
div.mat-mdc-autocomplete-panel {
61-
max-height: 55vh;
62-
}
63-
}

0 commit comments

Comments
 (0)