angular / angular/components

Setting maxHeight on overlay with flexibleConnectedTo strategy does not work, when viewport margin is also configured

Ouverte
#17,567 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/overlay P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### 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

![bug-2](https://user-images.githubusercontent.com/9967422/68024963-e1d5c080-fcab-11e9-8f39-c4a25de26309.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',
});
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et l'exemple de overlay.create utilisant flexibleConnectedTo, withViewportMargin(10) et maxHeight. Suivez la manière dont le positionnement connecté flexible gère la marge du viewport et vérifiez la correction avec les deux boutons, en vous assurant que la hauteur maximale de 300px est respectée dans chaque cas.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.