Drag&Drop animation not working inside pivot popup if using zIndex

Webix JS
#1

Hi there guys!
It seems like I’ve bumped into a problem described in title. For example:

        webix.ui({
            data: data,
            view: 'pivot',
            container: 'testA',
            id: 'pivot',
            popup: {
                zIndex: 251,
            }
        });

This code results in no animation when dragging fields from fields section to filters / columns / rows / values sections (the dragged element should stick to cursor, but it is not visible instead).
Thank you!

#2

You can check this codepen to test:

#3

Now I guess I understand the problem. It happens for all pivot popup child elements:

  • webix_pivot_drag_zone
  • webix_point_top
  • webix_pivot_popup (the one with data operations)

Looks like pivot popup child elements get their z-index calculated NOT in relation to the pivot popup z-index

#4

Hello,

Basically, z-index of both window and DnD markers are based on webix.ui.zIndexBase and increase on every show().
zIndexBase has an initial value (100) and isn’t related to constant custom z-index, so default calculation fails in such case.
As a solution, you can set a constant z-index to the drag markers (via CSS) according to the same parameter of your window.
Please, check the following sample: https://webix.com/snippet/c09c9ef2