angular / angular/components

bug(overlay): Push calculation is wrong with FlexibleConnectedPositionStrategy

Đang mở
#20,890 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/overlay P3
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

![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)

Hướng dẫn đóng góp

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.