angular / angular/components

bug(VirtualScroll): Horizontal scrolling inside cdk-virtual-scroll-viewport

Đang mở
#24,277 11 bình luận 22 reaction 0 người được giao Xem trên GitHub
area: cdk/scrolling 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ả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Content inside the cdk-virtual-scroll-viewport does use more than 100% width and does not break anymore and instead adds horizontal scrolling.

This is especially a problem when using following css rules:

```
white-space: nowrap;
overflow: hidden;
```

The problem is the created wrapper container with the `cdk-virtual-scroll-content-wrapper` class that has a `min-width: 100%` set but no `max-width` and can not be changed because of the view encapsulation.

### Reproduction

https://github.com/DaniLopes2003/VirtualScroll-DemoApp

### Expected Behavior

No horizontal scroll bar added or width, max-width and min-width customizable with css variables?

### Actual Behavior

Horizontal bar added because no min-width is set

### Environment

- Angular: 13.0.3
- CDK/Material: 13.1.3
- Browser(s): Chrome, Safari
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

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

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với cdk-virtual-scroll-viewport và phần tử cdk-virtual-scroll-content-wrapper của nó, sau đó tái hiện hành vi bằng VirtualScroll-DemoApp được liên kết và các kiểu white-space và overflow đã được báo cáo. Công việc hoàn tất khi viewport không còn thêm thao tác cuộn ngang không mong muốn và các ràng buộc về chiều rộng dự kiến vẫn có thể sử dụng được; hãy thêm hoặc cập nhật độ bao phủ nếu tìm thấy vị trí kiểm thử liên quan.

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.