bug(overlay): Push calculation is wrong with FlexibleConnectedPositionStrategy
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
## 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)
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu trong src/cdk/overlay/position/flexible-connected-position-strategy.ts tại dòng tính toán push được liên kết, sử dụng bản tái hiện trên StackBlitz cùng viewport 400px, margin 20px và overlay 80px đã nêu. Truy vết các phép tính overflow xung quanh và xác minh rằng overlay vừa với margin bên phải 20px; hoàn tất khi pushX vẫn là 0 trong trường hợp này mà không đưa thêm margin.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100