Customizer Menus: overflow issues when dragging menu items

[tywayne]

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

[helen]

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

[sanket.parmar]

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.

[samuelsidler]

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

[austinginder]

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.

[tywayne]

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.

[austinginder]

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.

[tyxla]

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]

Prevent infinite scrolling while dragging an item in nav menu customizer

[westonruter]

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

[adamsilverstein]

@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.

[karinedo]

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.

[adamsilverstein]

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]

slight doc block update

[westonruter]

In 34834:

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

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

[westonruter]

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.