callstack / callstack/react-native-paper

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

Offen Anfängerfreundlich
#5,093 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.2k
Ø Merge
5 T. 23 Std.
Gemergte PRs (30 T.)
12

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne auf der React Native Paper-Dokumentationsseite für Guides → Theming → Creating Dynamic Theme Colors und untersuche den benutzerdefinierten Theme-Builder, insbesondere das Element mit der Klasse color-picker-popup. Reproduziere das Problem in Firefox mit jedem Color Picker und überprüfe anschließend, dass das Popup und die manuelle Farbeingabe vollständig sichtbar sind, ohne das umgebende Layout zu beeinträchtigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native, typescript
Bereich
documentation, frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
68/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.