bug(overlay): Push calculation is wrong with FlexibleConnectedPositionStrategy
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
## 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)
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez dans src/cdk/overlay/position/flexible-connected-position-strategy.ts, à la ligne liée du calcul de push, en utilisant la reproduction StackBlitz et le viewport indiqué de 400px, la marge de 20px et l’overlay de 80px. Suivez les calculs de débordement environnants et vérifiez que l’overlay tient avec une marge droite de 20px ; c’est terminé lorsque pushX reste à 0 dans ce cas sans introduire de marge supplémentaire.
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
- 45/100