Skip to content

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

Description

@SouwMarcelus

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions