callstack / callstack/react-native-paper

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

Ouverte Adaptée aux débutants
#5,093 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la page de documentation de React Native Paper consacrée à Guides → Theming → Creating Dynamic Theme Colors et examinez le générateur de thèmes personnalisé, en particulier l’élément utilisant la classe color-picker-popup. Reproduisez le problème dans Firefox avec chaque sélecteur de couleur, puis vérifiez que le popup et la saisie manuelle de la couleur sont entièrement visibles sans perturber la mise en page environnante.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native, typescript
Domaine
documentation, frontend
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
68/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.