New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Mobile: Custom color picker does not appear on mobile. #10481

Merged
merged 1 commit into from Oct 11, 2018

Conversation

Projects
None yet
3 participants
@jorgefilipecosta
Member

jorgefilipecosta commented Oct 10, 2018

Description

On small sizes, the color picker was not appearing. This happened because its z-index was lower than the z-index of the sidebar on mobile.
This PR fixes this z-index problem.
Problem found in collaboration with @pento.

I added 'not(.is-mobile)' to an existing z-index because the rule where it was used was inside a not(.is-mobile) and that was not being referenced making debugging of z-index problems harder.

How has this been tested?

Resize the window to a small size < 600px.
Add a button block.
Open the sidebar, go to color settings and open the custom color picker.
Verify the color picker appears (on master the color picker does not appear).

@jasmussen

Confirmed, this fixes it.

Before:

screenshot 2018-10-10 at 19 21 46

After:

screenshot 2018-10-10 at 19 21 59

@jorgefilipecosta jorgefilipecosta added this to the 4.1 milestone Oct 11, 2018

@jorgefilipecosta jorgefilipecosta merged commit 1b10b4c into master Oct 11, 2018

2 checks passed

codecov/project 49.52% remains the same compared to 286317c
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the fix/custom-color-picker-not-shown-on-mobile branch Oct 11, 2018

@@ -77,7 +77,10 @@ $z-layers: (
// Shows adminbar quicklink submenu above bottom popover:
// #wpadminbar ul li {z-index: 99999;}
".components-popover.is-bottom": 99990,
".components-popover:not(.is-mobile).is-bottom": 99990,

This comment has been minimized.

@dsifford

dsifford Dec 14, 2018

Contributor

This commit breaks visibility of Dropdown on mobile when used in PluginSidebar. Reverting z-index back to z-index: 1000000 here fixes the issue.

ping @jasmussen

This comment has been minimized.

@dsifford

dsifford Dec 14, 2018

Contributor

Whoops, perhaps it wasn't THIS commit, but this is the line that breaks Dropdown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment