WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#33367 closed defect (bug) (fixed)

Customizer Menus: overflow issues when dragging menu items

Reported by: tywayne Owned by: adamsilverstein
Milestone: 4.4 Priority: normal
Severity: minor Version: 4.3
Component: Customize Keywords: has-patch fixed-major
Focuses: ui Cc:
PR Number:

Description

Dragging a menu item horizontally can result in going outside of the normal content area. This in itself isn't terrible and is probably an edge-case, but the result once you let go is a little troublesome. It correctly drops the item back in the list, but then the customizer area is mis-aligned.

Steps:

  1. Edit a menu.
  2. Drag menu item to right until it scrolls out of content area.
  3. Release click to let go of item.
  4. Return back to content area, but with misalignment now visible.
  5. You can drag an item back to the left to get content area to align.

Reproduced in latest Chrome/FF on Mac.
gif: https://cloudup.com/ir6LwOtkwml

Attachments (5)

33367-customizer-bug-fix.patch (431 bytes) - added by austinginder 4 years ago.
33367.patch (557 bytes) - added by tyxla 4 years ago.
Prevent infinite scrolling while dragging an item in nav menu customizer
33367.2.patch (651 bytes) - added by karinedo 4 years ago.
33367.3.patch (627 bytes) - added by adamsilverstein 4 years ago.
33367.4.patch (614 bytes) - added by adamsilverstein 4 years ago.
slight doc block update

Download all attachments as: .zip

Change History (23)

#1 @helen
4 years ago

  • Focuses ui added
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.3.1
  • Severity changed from normal to minor

Let's see if we can come up with a solution for this in 4.3.1, though it's pretty minor.

#2 @sanket.parmar
4 years ago

I think it's not a bug. It depends on how you are dragging, according to that it is going to adjust. Means it is adjusting in parent-child relationship.

Correct me if I am wrong.

#3 @samuelsidler
4 years ago

  • Milestone changed from 4.3.1 to 4.3.2

Would love a patch here, but without one we'll have to punt for now.

#4 follow-up: @austinginder
4 years ago

Adding an overflow: hidden fixes the issue as described. It does however reveal something else which was there all along. If you drag the menu item outside of the customizer section, it stops showing where you are and sorta jumps back into place. See what I mean here: https://cloudup.com/cb0avy9edGz. I would say, lets add the overflow and maybe someone else can figure out the dragging outside the customizer issue.

#5 in reply to: ↑ 4 @tywayne
4 years ago

Replying to austinginder:

Adding an overflow: hidden fixes the issue as described.

Unfortunately I don't think it is quite so easy - adding overflow:hidden here will not allow for vertical scrolling in cases where the menu has many items.

#6 @austinginder
4 years ago

Ah your right. I play around with the code and unfortunately the only one which I got working is a javascript hack. The following code uses Javascript to force the scrollLeft property to 0. This can be previewed by adding the following into your browser's console. It appears to do the trick.

jQuery('.accordion-section-content.menu').scroll(function() { jQuery(this).scrollLeft(0)});

Some things I explored.

The sortable js library has an axis option as reference here: http://stackoverflow.com/questions/5363046/jquery-portlet-horizontal-scroll-problem. However that prevents all drag and drop to the left/right so it breaks putting items under other items.

An all css solution is presented here: http://stackoverflow.com/questions/17756649/disable-the-horizontal-scroll however I was not successful in implementing this.

Anyone have other suggestions? If a css solution is possible, I would recommend going that route, if not the only option may be to do a javascript fix.

#7 @tyxla
4 years ago

It appears that the proposed hack by @austinginder is the only way, because there is no pretty way to restrict the max left position of a sortable item. IMHO either this the only solution, or the ticket is a wontfix.

Attaching a patch for that.

@tyxla
4 years ago

Prevent infinite scrolling while dragging an item in nav menu customizer

#8 @tyxla
4 years ago

  • Keywords has-patch added; needs-patch removed

#9 @westonruter
4 years ago

@adamsilverstein Thoughts, given your experience with the sortable menus?

#10 @adamsilverstein
4 years ago

@westonrouter - Thanks for pinging me :)

I'd like to spend some time digging in to the issue to see if I can find a CSS solution. I appreciate the efforts of the previous contributors and the detailed report from @austinginder is especially helpful. I'm concerned the final patch is a hack and will lead to unexpected behavior.

This ticket was mentioned in Slack in #core-customize by adamsilverstein. View the logs.


4 years ago

#12 @adamsilverstein
4 years ago

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

@karinedo
4 years ago

#13 @karinedo
4 years ago

The misalignment is caused by the horizontal scroll position when we release the item, unfortunately, there's no CSS-only way to reset a scroll position ( for now ;) )

The patch resets the horizontal scroll position to 0 after a menu item is released.

#14 @adamsilverstein
4 years ago

In 33367.3.patch:

  • Use cached selector to target menu content

Tested @karinedo's patch and this works nicely. Here is a screencast of the menus snapping back into place after I overscroll to the right:

http://cl.ly/image/2W1c2g133N2m

@adamsilverstein
4 years ago

slight doc block update

#15 @westonruter
4 years ago

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

In 34834:

Customizer: Reset horizontal scroll position when finished dragging a nav menu item.

Props karinedo, austinginder, adamsilverstein, tyxla.
Fixes #33367.

#16 @westonruter
4 years ago

In 34835:

Customizer: Reset horizontal scroll position when finished dragging a nav menu item.

Cherry-picks [34834].

Props karinedo, austinginder, adamsilverstein, tyxla.
Fixes #33367 for 4.3.

#17 @westonruter
4 years ago

  • Keywords fixed-major added

#18 @johnbillion
4 years ago

  • Milestone changed from 4.3.2 to 4.4
Note: See TracTickets for help on using tickets.