Setting maxHeight on overlay with flexibleConnectedTo strategy does not work, when viewport margin is also configured
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### Reproduction
Steps to reproduce:
1. Visit the [stackblitz](https://stackblitz.com/edit/understanding-overlay-03-viewport-margin-bug)
2. Click the 2 buttons
#### Expected Behavior
That the max height of 300px is respected in both cases
#### Actual Behavior
Max height is only respected, if `withViewportMargin(10)` is not configured.
#### Environment
- Angular: 8.2.13
- CDK/Material: 8.2.3
- Browser(s): `Version 78.0.3904.70 (Official Build) (64-bit)`
- Operating System (e.g. Windows, macOS, Ubuntu): `macOS Mojave`
#### Gif

#### Relevant code
```typescript
const overlayRef = this.overlay.create({
hasBackdrop: true,
positionStrategy: this.overlay.position().flexibleConnectedTo(element)
// The max height is only respected, if the viewport margin is left out
.withViewportMargin(10) // <------
.withPositions([
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
},
]),
width: '200px',
maxHeight: '300px',
});
```
Beitragsleitfaden
Rechercherichtung
Beginnen Sie mit der verknüpften StackBlitz-Reproduktion und dem overlay.create-Beispiel, das flexibleConnectedTo, withViewportMargin(10) und maxHeight verwendet. Verfolgen Sie, wie die flexible verbundene Positionierung den Viewport-Rand behandelt, und überprüfen Sie die Korrektur anhand beider Schaltflächen. Stellen Sie dabei sicher, dass die maximale Höhe von 300px in jedem Fall eingehalten wird.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100