WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#19562 closed defect (bug) (fixed)

Admin menu positioned incorrectly

Reported by: phill_brown Owned by: koopersmith
Milestone: 3.4.1 Priority: normal
Severity: normal Version: 3.3
Component: Administration Keywords: has-patch commit
Focuses: Cc:

Description

The WordPress menu positions incorrectly in a scenario where it's collapsed, hovered and then expanded again.

  1. Select a menu item (easiest to use Settings)
  2. Collapse the menu
  3. Make the height of the window small enough so the sub-menu is forced to move up the page on hover ie the menu won't be inline with it's original hidden position.
  4. Expand the menu

I've attached two screenshots to better explain the issue and a patch that fixes it.

An alternative fix would be to traverse each sub-menu when the collapse link is clicked and remove the top margins.

Attachments (4)

commonjs.patch (13.9 KB) - added by phill_brown 5 years ago.
mouseon.jpg (29.0 KB) - added by phill_brown 5 years ago.
expanded.jpg (30.4 KB) - added by phill_brown 5 years ago.
19562.patch (450 bytes) - added by SergeyBiryukov 4 years ago.

Download all attachments as: .zip

Change History (16)

@phill_brown
5 years ago

@phill_brown
5 years ago

#1 @phill_brown
5 years ago

  • Summary changed from WordPress admin menu positioned incorrectly to Admin menu positioned incorrectly

#2 @jane
5 years ago

  • Owner set to koopersmith
  • Status changed from new to assigned

#3 @nacin
4 years ago

  • Keywords reporter-feedback added

I think this is no longer reproducible in 3.4.

#4 @phill_brown
4 years ago

  • Keywords reporter-feedback removed

Still seem to be able to produce it on the latest in SVN...

#5 @azaozz
4 years ago

Following the exact steps from the ticket, can't reproduce it. When the menu is expanded any positioning from any sub-menus is removed.

Version 0, edited 4 years ago by azaozz (next)

#6 @phill_brown
4 years ago

Ah hang on, my mistake sorry. The error now only occurs when the navigation menu collapses and expands automatically when the browser window resizes. Try this:

  1. Select 'settings'
  1. Maximise your window with the menu in it's default expanded state
  1. Shrink your window so it's small enough to trigger the collapse state.
  1. Scroll down the page so the position the settings icon is near the bottom of the window.
  1. Hover over the settings icon. The positioning of the window should force the sub-menu heading out of line of the icon ie the menu won't be inline with it's original hidden position. See mouseon.jpg.
  1. Maximise the window again so the menu expands. This should produce the broken state similar to that shown in expanded.jpg

Just checked my patch and that still appears to fix the problem. It looks like this ticket was in part duplicated and fixed in ticket 20857.

#7 @SergeyBiryukov
4 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.4.1

I can reproduce it with the steps from the latest comment.

Refreshed the patch to reset margin-top, like we do in lines 176 and 213.

#8 @azaozz
4 years ago

I can reproduce it too. Maybe we don't need both removals of the sub-menu negative margin, but as far as I remember sometimes mouseleave doesn't fire right.

#9 @azaozz
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In [21090]:

Admin menu: reset sub-menus position on mouseleave so they don't break when auto-expanded, props phill_brown SergeyBiryukov, fixes #19562

#10 @nacin
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 3.4.1 consideration, or closing as fixed on 3.5.

#11 @nacin
4 years ago

  • Keywords commit added

Per dev chat: good to go for the 3.4 branch.

#12 @azaozz
4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [21097]:

Admin menu: reset sub-menus position on mouseleave so they don't break when auto-expanded, props phill_brown SergeyBiryukov, fixes #19562 for 3.4

Note: See TracTickets for help on using tickets.