Modal Dialogue - can't close due to dialogue position

šŸ’¬ General Discussion
1

Has anyone else come across the issue where you canā€™t close a modal dialogue because the top window furniture (containing the ā€˜Xā€™ close icon) is hidden by the main menu bar at the top of the screen?

Only solution Iā€™ve found is to zoom our browser out and then drag the dialogue down (although it is quite tricky to grab the top window furniture to drag the window).

Please see attached image for example of what I see:

2

Iā€™ve worked out a fix. I edited the file ā€œthemes/Suite7/css/yui.cssā€ and added a z-index property to the yui-panel-container like this:

.yui-panel-container.shadow {
    padding: 2px 4px 0 2px;
    z-index:51 !important;
}

Modals always sits over the main header bar now. :slight_smile:

2 Likes
3

Ok, my last answer doesnā€™t work. In certain places the shim/mask layer dynamically increases itā€™s z-index to +10 greater than the dialogue so you end up with dialogues behind the shim/mask that you canā€™t interact with!

New solution is to remove my old solution, and then instead edit the file

htdocs/cache/themes/Suite7/css/style.css

and in the ā€œheaderā€ block of the css change the z-index from 50 down to 0 so youā€™ll have something like:

header {
    position:fixed;
    top:0px;
    width:100%;
    background: #333333; /* Old browsers */
    ...
    border-bottom:2px solid #f10202;
    z-index:0;
}

This places the header down the z-index order instead of trying to raise the dialogue up the order.

Looks like it works atm. Will have to see though if this solution has any unintended consequences also!

4

Ok found an issue with setting z-index of the header to 0, the menu now appears underneath the panels on the pages.

Setting the headerā€™s z-index to 1 seems to fix that issue while still not overlaying the dialogue boxes.

5

One last amendment.

You need to make the change to the css in the base file:

htdocs/themes/Suite7/css/style.css

rather than the cached version of the file that i references earlier. Otherwise your change will be overwritten next time the ā€œQuick Repairā€ tool is run!

6

Here we go again.

Found another issue with my solution. When clicking on a contactā€™s email address the resulting pop-up is under the modal shim (the dark semi-opaque div).

To fix this I have had to override the shimā€™s z-index to be 1 (for some reason it is set in the style property of the div element to 156!).

Edit the file ā€˜htdocs/themes/Suite7/css/yui.cssā€™ and edit the ā€˜maskā€™ rule to be as follows (basicall add the ā€˜!importantā€™ directive):

.mask {
    z-index: 1 !important;
    ...

Then do a ā€˜Quick Repairā€™ to propagate the changes.

To be honest I canā€™t believe that the software was allowed to be released with these functionality breaking issues present. Can these please be fixed for the next version?