angular / angular/components

bug(overlay): Push calculation is wrong with FlexibleConnectedPositionStrategy

Aperta
#20,890 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/overlay P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

![overlay](https://user-images.githubusercontent.com/6360699/97225389-df307d00-17d2-11eb-8399-e5a339d20aca.gif)

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)

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia in src/cdk/overlay/position/flexible-connected-position-strategy.ts, alla riga collegata del calcolo di push, usando la riproduzione StackBlitz e il viewport indicato di 400px, il margine di 20px e l’overlay di 80px. Traccia i calcoli di overflow circostanti e verifica che l’overlay rientri con un margine destro di 20px; il lavoro è completato quando pushX rimane 0 in questo caso senza introdurre un margine aggiuntivo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.