bug(overlay): Push calculation is wrong with FlexibleConnectedPositionStrategy
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
## Bug description
Push calculation is wrong [in this line](https://github.com/angular/components/blob/0b2d150339fb6e5736ea199bc62785ec1d2e8928/src/cdk/overlay/position/flexible-connected-position-strategy.ts#L614). Maybe in the next lines also, but I did not check it yet.
I tried to add an element, that perfectly fits, but I could not. I realized that the double of the original margin is used on the right side. I used LTR.
### Input
Take a document, that has 400px width. The margin is 20px on the viewport of the overlay. I tried to add one overlay at (300, 20) with size of (80,40). I will use this in the stackblitz and in the calculations.
#### Reproduction
https://stackblitz.com/edit/angular-ardamx

As you see the overlay is positioned well at the begining. 100px is the container. 80px is the overlay. 10-80-10 is well positioned.
If the body element is 420px width, the position is right. 0-80-20.
If the body is shrinked more to 400px, the position will not be 0-80-20, however it could fit.
#### Expected Behavior
pushX to be 0 in this case. The element should fit without pushing it. The margin should be 20px on the right, too.
#### Actual Behavior
start.x is 300, the width is 80 as these are given. The viewport width is 360px (=400px-2*20px).
pushX will be -20 as overflowRight is 20. This is calculated by 300+80-360=20.
This is wrong. The element can fit without pushing it. The margin is now the double of the originally given, which is 40px in this case.
#### Environment
- Angular: 10.1.3
- CDK/Material: 10.2.5
- Browser(s): Chrome (Could be any)
- Operating System (e.g. Windows, macOS, Ubuntu): macOS (Could be any)
Beitragsleitfaden
Rechercherichtung
Beginne in src/cdk/overlay/position/flexible-connected-position-strategy.ts bei der verlinkten Zeile zur Push-Berechnung, verwende die StackBlitz-Reproduktion und das angegebene Viewport von 400px, den Rand von 20px und das Overlay von 80px. Verfolge die umgebenden Überlaufberechnungen und überprüfe, dass das Overlay mit einem rechten Rand von 20px hineinpasst; als erledigt gilt dies, wenn pushX in diesem Fall 0 bleibt, ohne einen zusätzlichen Rand einzuführen.
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