angular / angular/components

Vertical positioning of flexible connected overlay on mobile

Offen
#13,614 8 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/overlay P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Flexible connected overlays are positioned correct even if the user is scrolling

#### What is the current behavior?
Scrolling affects the vertical positioning of the overlay. The overlay is positioned to low.

#### What are the steps to reproduce?
Scroll down a page on a mobile device (not to the end of the page, but somewhere in the middle) and then open the flexible connected overlay. The overlay seems to be positioned to low.

Example desktop:
bildschirmfoto 2018-10-15 um 07 34 49

Example mobile:
bildschirmfoto 2018-10-15 um 07 34 25

Configuration of the overlay:
```
const positionStrategy = this.overlay
.position()
.flexibleConnectedTo(this.elementRef) // <-- elementRef is the icon element from the screenshot
.withPositions([
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' }
])
.withPush(false);
this.overlay.create({
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.reposition()
});
```

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/core: 6.1.0
@angular/material: 6.4.7
@angular/cdk: 7.0.0-rc.1
typescript: 2.7.2

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der im Bericht gezeigten Positionierungsstrategie flexibleConnectedTo und der Scroll-Strategie reposition des CDK overlay. Reproduziere das Problem auf einem Mobilgerät, nachdem du ein Stück nach unten gescrollt hast, und verfolge anschließend das Positionierungsverhalten; abgeschlossen ist die Aufgabe, wenn das flexible connected overlay beim Scrollen die erwartete vertikale Position beibehält.

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
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.