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

Open Beginner friendly
#5,093 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react-native, typescript
Domain
documentation, frontend

Research direction

Start at the React Native Paper documentation page for Guides → Theming → Creating Dynamic Theme Colors and inspect the custom theme builder, especially the element using the color-picker-popup class. Reproduce the issue in Firefox with each color picker, then verify that the popup and manual color input are fully visible without breaking the surrounding layout.

Written by the indexing model from the issue text.

Description

bug
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
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
11

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from callstack/react-native-paper

All issues in callstack/react-native-paper

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.