WordPress.org

Make WordPress Core

#21832 closed defect (bug) (fixed)

Weird CSS with a large submenu item in admin

Reported by: ericlewis Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: Menus Keywords: has-patch
Focuses: Cc:

Description

With a large menu (tons of submenu pages) positioned at the bottom of the menu bar in the admin, there is some unexpected CSS behavior.

While on a submenu page (or the top-level menu page), on hover of the menu will move the submenu actually up over some of the rest of the menu items. (See screenshot)

I've traced it to a hover bind function on menus, which doesn't check if the current submenu is already opened before adjusting its CSS. If the menu is already open, it should just be left alone.

To reproduce, drop this code in.

add_action('admin_menu', 'register_custom_menu_page');

function register_custom_menu_page() {
	add_menu_page('custom menu title', 'custom menu', 'add_users', 'custompage', 'custom_page_callback', '', 101); 
	for ( $i = 0; $i <= 15; $i++ )
		add_submenu_page( 'custompage', 'My Custom Submenu Page ' . $i, 'My Custom Submenu Page ' . $i, 'manage_options', 'my-custom-submenu-page-' . $i, 'custom_page_callback' ); 	
}

function custom_page_callback() {
	echo '<h3>My Custom Page</h3>';

}

Attachments (2)

21832.patch (484 bytes) - added by ericlewis 20 months ago.
basic fix: if has class wp-menu-open don't modify CSS on hover
on-hover-of-big-submenu-fail.png (136.1 KB) - added by ericlewis 20 months ago.
screenshot of the issue

Download all attachments as: .zip

Change History (8)

ericlewis20 months ago

basic fix: if has class wp-menu-open don't modify CSS on hover

ericlewis20 months ago

screenshot of the issue

comment:1 alexvorn220 months ago

you must use a different function for every add_submenu_page

comment:2 follow-up: alexvorn220 months ago

can't replicate in chrome, maybe your browser version is old?

comment:3 in reply to: ↑ 2 ericlewis20 months ago

Replying to alexvorn2:

can't replicate in chrome, maybe your browser version is old?

Double checked. Found it in Chrome 21.0.1180.89, Safari 6, however it doesn't show up in FireFox 15.0.1

comment:4 azaozz20 months ago

Confirmed, but applying the patch prevents showing the submenu when the menu is folded.

Last edited 20 months ago by azaozz (previous) (diff)

comment:5 azaozz20 months ago

  • Milestone changed from Awaiting Review to 3.5

comment:6 azaozz20 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [21787]:

Don't try to show the submenu when it's visible (Chrome), part props ericlewis, fixes #21832

Note: See TracTickets for help on using tickets.