BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Error Reports
  New Posts New Posts RSS Feed - jQueyrUI dialog not overlayed on inherited layer
  FAQ FAQ  Forum Search   Register Register  Login Login

jQueyrUI dialog not overlayed on inherited layer

 Post Reply Post Reply
Author
Message
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Topic: jQueyrUI dialog not overlayed on inherited layer
    Posted: Feb 09 2017 at 10:32pm
Hi OE Team,

I use jQuery UI dialog in my project.

(1) make BaseLayer and put the jQuery UI dialog code, (works)
(2) duplicate BaseLayer to 2nd Layer in Layers. (works)
(3) copy 2nd Layer to a new page. (works)
(4) create a new page (by Top menu>Project>New page) w/ Linked Layer:BaseLayer (not work)
      same result w/ Linked Layer:2nd Layer as well.

No difference with (3) and (4) in source code view. Identical.

Pictures:
(3) https://drive.google.com/open?id=0B72Ay6Ww5uDcRzJCQjNaX2NhNG8
(4) https://drive.google.com/open?id=0B72Ay6Ww5uDcWmtkMHB5bFI4a0E

I want to know:
  1. What makes this difference?
  2. How to overlay the dialog from parent layer on the foreground in all inherited pages?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Feb 10 2017 at 12:35am
Please see my private message. It is not error but an expected behavior and a question of applying higher z-index
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 10 2017 at 4:35am
Thank you, DmitOE.

But I still cannot understand what makes difference on behavior in it? The source is identical, only difference is 'copy the page to new page' and 'make new page with linked layer'

If this issue is caused by CSS behavior, why copied page from BaseLayer doesn't have same problem? I am very confused....

1. default z-index is auto?
2. Child: inherited page z-index is automatically higher than parent layer's z-index?
3. In case of copied page, does it has same z-index?


Edited by djju1029 - Feb 10 2017 at 4:55am
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Feb 10 2017 at 12:32pm
When you copy the page, z-indexes stay the same; attention however, when you duplicate a page/layer the IDs of elements change, so if you use IDs in manually written Code Blocks, they may be broken - I remember adding some functionnality to update IDs in codes but it's worth checking twice anyway.

When you inherit a layer, all elements positioned "absolutely" from the layer will have z-index SMALLER than elements on the page itself. This is to be able to put content over the layer's content. You can change this either by Code Blocks or by using Free Code at the bottom of Styles->Customize where you can write "z-index: 100000 !important;" for example (don't forget "!important" to be sure to override the aucomatic value by OE). There will be many questions-answers on the forum concerning this behavior, and in most cases it was enough to modify z-index as described here.
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 10 2017 at 2:26pm
I always appreciate your help.
The test result is: (screen captures are linked)

(1) put custom class CSS into two dialog by Code Block (Source) in BaseLayer.

(2) received custom class CSS in inherited Layer:BaseLayer_advance.php

(3) View with debug window (firefox)

(4) CSS debug window (IE10)

Please notice that:
1. The dialog is still not overlayed.
2. Putting custom CSS using Free Code is same.
3. In IE10 debug window, BaseLayer_advance is properly written.
4. In Firefox debug window, the dialog behavior is affected by jQueryUI CSS and its z-index is still 101.
5. If I change its value to 100000 manually, it become to overlay.
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 10 2017 at 3:24pm
Here is my final solution.

I remove custom-class CSS, intead, put the CSS code in the jQuery constructor as following:

$( function() {
    $( "#dialog-nosystem, #dialog-error" ).dialog({
   autoOpen: false,
    modal: true,
            buttons: {
               Ok: function() {
                   $( this ).dialog( "close" );
               }
           },
           open: function(event, ui){
$('.ui-dialog').css('z-index',100000);
$('.ui-widget-overlay').css('z-index',10000);
   }
    });
} );

Thank you for your help!!

P.S. As jQuery ui 1.10 and above, the z-index can no longer be set in custom-class CSS or $('#element').dialog({zIndex: 3999}); way. I found it in https://jwcooney.com/2012/01/12/the-default-zindex-of-a-jquery-ui-dialog/



Edited by djju1029 - Feb 10 2017 at 4:48pm
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (1) Thanks(1)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Feb 10 2017 at 4:16pm
Thank you for this solution. I think however that the following CSS code would suffice:

.ui-dialog { z-index: 100000 !important; }
.ui-widget-overlay { z-index: 10000 !important; }


Edited by Dmit OE - Feb 10 2017 at 4:17pm
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.