Unable to sort menu items when the box is scrolled down

[vitty1]

Hello,

I'm not able to sort menu item when there are more items and the box is scrolled down.

OctoberCMS version: 446
Static Pages version: 1.2.20
Tested in Firefox, Chrome

[w20k]

Hi @vitty1, it's related to an old JS library. It's in my todo list, but don't know when will I be able to continue.

Same issue in sitemap: rainlab/sitemap-plugin#66
Sortable plugin: https://github.com/johnny/jquery-sortable

[nleehone]

I'm having the same issue.

OctoberCMS version: 446
Static Pages version: 1.2.20
Tested in Chrome on Linux: Version 69.0.3497.100 (Official Build) (64-bit)

After a bit of testing I found that I could partially overcome the problem by setting

.control-scrollbar >div {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

in Settings -> Customize back-end -> Styles.

This overrides the default style being applied, which is:

.control-scrollbar >div {
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

With this change you can re-order the items even if the menu has been scrolled. The issue is that the stacking context of the absolutely positioned element was being set to the div under the control-scrollbar by translateZ(0), which creates a new stacking context.

Scrolling using the mouse during a sort still causes issues, because scrolling doesn't affect the top position of the absolutely positioned element. If you need to move an element to a position that is off-screen, then do the move in multiple steps, scrolling in-between moves, not during the move.

I'm going to look into this further and see if there is a way to get the js to update the position correctly on scroll.

[nleehone]

Another quick update.

If you scroll using the mouse button, the problem mentioned in my previous post persists, however if you scroll by dragging the item to the top or bottom of the screen the the above fix works perfectly and you will be able to sort the menu items correctly.

I'm still not sure what is causing the mouse scroll to work differently than dragging the item to the top or bottom of the screen.

[LukeTowers]

@nleehone are you able to make a PR with a fix to this?

[nleehone]

I still haven't managed to fix the issue with the mouse scroll wheel, so it wouldn't be a complete fix - it would only address the problem when dragging the item without using the scroll wheel.

If this is acceptable then I will look into how to make a PR (never done this before).

[bennothommo]

@nleehone Would you mind starting a PR with the fix so far? You will need to fork the Pages plugin repo and then follow the steps here in order to make a pull request from your fork.

[w20k]

@bennothommo what I've found out, that we need to fix old https://github.com/johnny/jquery-sortable plugin to make it work. So, I'd say it's a core issue.

[daftspunk]

Mouse scroll wheel fix: octobercms/october@ed2eec6

CSS fix:
octobercms/october@0a98afb

This should be fixed in Build 462+