Context Navigation

← Previous Ticket
Next Ticket →

#49245 closed defect (bug) (fixed)

Menu admin screens: button issue on small screens

Reported by:	passoniate	Owned by:	sabernhardt
Priority:	normal	Milestone:	5.7
Component:	Menus	Version:
Severity:	normal	Keywords:	has-screenshots has-patch commit
Cc:		Focuses:	ui, css

Description

Attachments (13)

menubutton.png (23.6 KB ) - added by passoniate 6 years ago.
menucheck.png (18.7 KB ) - added by passoniate 6 years ago.
49245.patch (389 bytes ) - added by mukesh27 6 years ago.: A patch that fixed button alignment.
Responsive design.png (24.7 KB ) - added by mukesh27 6 years ago.
Screenshot_20200121-175044.png (91.2 KB ) - added by passoniate 6 years ago.: Respectable @mukesh27 when i click on checkboxes then this issue will appear
49245.show-overflow-always.patch (514 bytes ) - added by sabernhardt 6 years ago.: removing overflow: hidden from .menu-settings-group container
49245.show-overflow-on-mobile.patch (527 bytes ) - added by sabernhardt 6 years ago.: resets overflow to show at narrower widths
Capture d’écran 2021-01-07 à 00.08.03.png (71.7 KB ) - added by audrasjb 6 years ago.: Before 49245.show-overflow-on-mobile.patch
Capture d’écran 2021-01-07 à 00.11.31.png (71.8 KB ) - added by audrasjb 6 years ago.: After 49245.show-overflow-on-mobile.patch
checkboxes-before-patch-firefox.png (9.7 KB ) - added by sabernhardt 6 years ago.: before 49245.show-overflow-on-mobile.patch: checkbox focus cutoff on left, Firefox also cuts off top border
checkboxes-after-patch-firefox.png (9.9 KB ) - added by sabernhardt 6 years ago.: after 49245.show-overflow-on-mobile.patch: checkbox focus outline and borders in Firefox
menu.PNG (12.8 KB ) - added by Boniu91 5 years ago.
menu2.PNG (13.0 KB ) - added by Boniu91 5 years ago.

Download all attachments as: .zip

Change History (28)

@passoniate
6 years ago

Attachment menubutton.png added

@passoniate
6 years ago

Attachment menucheck.png added

#1 @SergeyBiryukov
6 years ago

Component General → Menus
Focuses administration added

@mukesh27
6 years ago

Attachment 49245.patch added

A patch that fixed button alignment.

@mukesh27
6 years ago

Attachment Responsive design.png added

#2 @mukesh27
6 years ago

Keywords has-patch added
Version 5.3.2

@passoniate I can't replicate the checkbox issue in windows 10 responsive design.

@passoniate
6 years ago

Attachment Screenshot_20200121-175044.png added

Respectable @mukesh27 when i click on checkboxes then this issue will appear

#3 @afercia
6 years ago

The focus outline on the checkboxes is cut-off on the left because one of the ancestor elements (.menu-settings-group) has overflow: hidden.

This has always been the case in all previous WP versions. If used to contain floated elements, overflow: hidden should be replaced with less invasive methods e.g. by using the CSS class wp-clearfix (needs investigation).

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

6 years ago

#5 @afercia
6 years ago

Focuses accessibility administration removed

This ticket was discussed during today's accessibility bug-scrub: not sure this issue relates to web accessibility. Seems more related to UI consistency / design. Updating the ticket properties accordingly.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.

6 years ago

@sabernhardt
6 years ago

Attachment 49245.show-overflow-always.patch added

removing overflow: hidden from .menu-settings-group container

@sabernhardt
6 years ago

Attachment 49245.show-overflow-on-mobile.patch added

resets overflow to show at narrower widths

#7 @sabernhardt
6 years ago

Keywords needs-testing added
Milestone Awaiting Review → Future Release

With Windows browsers in English, I don't see any need to hide the overflow, even on larger screens. 49245.show-overflow-always.patch simply removes overflow: hidden from the container.

If there is a problem with floating, however, floats are removed for mobile screens anyway. 49245.show-overflow-on-mobile.patch continues to hide the overflow at larger sizes and shows it for smaller sizes.