callstack / callstack/react-native-paper

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

Aperta Adatta ai principianti
#5,093 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
5g 23h
PR unite (30g)
12

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla pagina della documentazione di React Native Paper per Guides → Theming → Creating Dynamic Theme Colors e ispeziona il generatore di temi personalizzato, in particolare l’elemento che usa la classe color-picker-popup. Riproduci il problema in Firefox con ogni selettore di colore, quindi verifica che il popup e l’inserimento manuale del colore siano completamente visibili senza compromettere il layout circostante.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native, typescript
Ambito
documentation, frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
68/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.