callstack / callstack/react-native-paper

Color Picker Popup Is Obscured On "Guides -> Theming -> Creating Dynamic Theme Colors" Documentation On Both v5 and v6

Đang mở Phù hợp với người mới
#5,093 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour

Color picker popup is not fully shown. I can't fill the color manually because the input is obscured. This happens for primary, secondary, and tertiary color pickers. I don't know if this happens on another platform, but I'm currently using Firefox 155.0 at the time of writing.

### Expected behaviour

The color picker should be fully shown.

### How to reproduce?

1. Go to **React Native Paper** documentation site (v5 or v6).
2. Navigate to **Guides -> Theming -> Creating Dynamic Theme Colors**.
3. Scroll down to the custom theme builder / color picker section and click any color input.

### Preview

**Primary Color Picker**
Image

**Secondary Color Picker**
Image

**Tertiary Color Picker**
Image

### What have you tried so far?

I was able to show the whole thing by changing the "div" element with "color-picker-popup" class, "position" style to "relative" instead of "absolute". But it also grows the parent "tr" element.

**Modified Element**
Image

### Your Environment

| software | version
| --------------------- | -------
| ios | N/A
| android | N/A
| react-native | N/A
| react-native-paper | v5 / v6 (docs site)
| node | N/A
| npm or yarn | N/A
| expo sdk | N/A
| Firefox | 155.0

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

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

Hướng nghiên cứu

Bắt đầu tại trang tài liệu React Native Paper cho Guides → Theming → Creating Dynamic Theme Colors và kiểm tra trình tạo theme tùy chỉnh, đặc biệt là phần tử sử dụng class color-picker-popup. Tái hiện vấn đề trong Firefox với từng bộ chọn màu, sau đó xác minh rằng popup và ô nhập màu thủ công hiển thị đầy đủ mà không làm hỏng bố cục xung quanh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
documentation, frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
68/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.