Tabs: Z-Index conflict between Modal overlay and draggable Module Tabs

[sanx72]

IDS 4.60.0
Windows 10
Chrome

I've enabled the new "sortable: true" option on our module tabs so they can be re-organised but I noticed that when a modal dialog is displayed, the last selected "draggable" element in the module tab (in this case the "New Tab Builder" tab) is higher in the Z-order than the dialog/overlay.

I created a simple test harness using your standard Module Tab example, added sortable: true to the Module Tab settings, and then added a button that opened a modal message; e.g.

This means that not only does it look odd, you can actually still drag the module tab when a modal dialog is open which I think is a UI bug.

It looks like the draggable item has a z-index of 7000 but the overlay has a z-index of 1000 so that is why the module tab is appearing higher in the z-order.

Hopefully you can reproduce this yourself but let me know if you want the example code.

[tmcconechy]

@sanx72 this is what our structure should be..

20 - Contextual Toolbar
500 - Side Menu, Status Bar
1000 - Overlay
1010 - Busy Indicator
1015 - Popdown
 1020 - Dialogs (Modals)
3000 - Popovers
4000 - Lookup
4500 - Drop Down
6000 - Tooltips
7000 - Draggables
8000 - Slide in Message Dialog/Toast
9000 - Sticky Nav / Context Menus
10000 - Full Page Sticky Nav, Search Results
10020 - Skip link

Normally the drag items are higher than the modal because if you had tabs on the modal or contextual action panel it should be able to work on there.

So not sure how to fix it. But i think you should close the modal if doing the drag? Or does this just do this on load? (Might need an example.. you can use https://stackblitz.com/edit/ids-enterprise-4600 to create it.

Maybe a fix is
a) set css so its 7000 if on a modal or CAP
b) else below 500

[sanx72]

All I've done is add the "sortable:true" option to the standard module tab example and add a button that displays a modal dialog. I'll try and attach my example.

I don't understand your questions.

After displaying the module tabs as the primary view switching UI component, the user may perform other actions in the UI that will display a modal dialog, and when the modal is visible, the module tab elements should be beneath the overlay and prevent any UI actions within the main display so only the actions/fields in the dialog itself are usable, but currently the module tabs with draggable class are above the overlay so the user can perform action against them.

[tmcconechy]

OK you did understand and answer my question. I think a fix is

a) set css so its 7000 if on a modal or CAP
b) else below 500

Example should be easy to make as described - show a modal on that page https://main-enterprise.demo.design.infor.com/components/tabs-module/example-sortable.html

[sanx72]

testIDS.zip

Click the Open Modal Dialog button on the New tab Builder tab to see the issue.

[jbrcna]

QA Passed. v4.63.0-beta0
https://4630-beta0-enterprise.demo.design.infor.com/components/tabs-module/example-sortable.html