jQueyrUI dialog not overlayed on inherited layer |
Post Reply |
Author | |
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
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?
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(1)
|
Please see my private message. It is not error but an expected behavior and a question of applying higher z-index
|
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
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 |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(1)
|
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. |
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
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.
|
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
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 |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(1)
|
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 |
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |