Modal element above others -- Platform problem

Dashboard
1

Elements can be displayed differently with certain browsers, which is well known. Unfortunately, I don't know how to achieve the same result for different browsers using suitable CSS formulation, at least in this case:
modal_testing_FX FX
modal_testing_iPhone1 iPhone

See these nodes:

[{"id":"0fb520c25469b9bf","type":"tab","label":"Modal Test","disabled":false,"info":"","env":[]},{"id":"0adc62f254fe565a","type":"ui_text","z":"0fb520c25469b9bf","group":"db5030bb15132bad","order":1,"width":6,"height":1,"name":"Text field1","label":"Text field1","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":500,"y":220,"wires":[]},{"id":"ed9715e613652bb2","type":"ui_text","z":"0fb520c25469b9bf","group":"db5030bb15132bad","order":3,"width":6,"height":4,"name":"Text field2","label":"Text field2","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":500,"y":260,"wires":[]},{"id":"491e302da4344bfa","type":"ui_template","z":"0fb520c25469b9bf","group":"db5030bb15132bad","name":"","order":2,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>\n\n<span>Template in the middle </span>\n\n<span id=\"myinfos\" class=\"modal\" style=\"margin-left: 220px;\">The modal section </span>\n\n<style>\n    /* The Modal (background) */\n    .modal {\n    --mwidth: 300px;\n    \n    display: block;              /* Hidden by default */\n    position: fixed;            /* Stay in place */\n    z-index: 2000;              /* Sit on top */\n    left: 0;\n    top: 0;\n    margin-top: 80px;\n    width: var(--mwidth);\n    margin-left: calc((100% - (var(--mwidth)))/2);\n    height: 260px;\n    \n    overflow: auto;              /* Enable scroll if needed */\n    background-color: rgb(0, 0, 0);         /* Fallback color */\n    background-color: rgba(0, 0, 0, 0.4);   /* Black w/ opacity */\n    }\n    \n    /* Modal Content */\n    .modal-content {\n    background-color: #fefefe;\n    padding: 12px;\n    border: 1px solid #888;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":220,"wires":[[]]},{"id":"db5030bb15132bad","type":"ui_group","name":"Modal Testing","tab":"ce82cf5f4b6be9ac","order":6,"disp":false,"width":"6","collapse":false,"className":""},{"id":"ce82cf5f4b6be9ac","type":"ui_tab","name":"Modal Testing","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

The problem is the "The modal section" element. It is required that it is displayed above all other elements, as with first PNG (Firefox).
On iPhone, however, it is shown behind "Text field2". (The shift to the right is not relevant here at the moment).

Is there a CSS formulation that ensures that the display on Apple (iPhone/OSX and MacOS) / WEBkit looks the same as on Firefox?
Or should the modal display be done differently?

2

Layering can be done via css with the z-index property.

The default z-index is 0, if you set the modal to 10, it should appear above the rest - if the rest is below 10.

.modal{z-index:10}
3

Good old Safari and it's well known problems when stacking context gets in the way.
Here's few possible workarounds described without pages of scientific text to read..

4

@backman2 @hotNipi

To find a solution, I also came to the page mentioned by @hotNipi and tried to add what was said at the end:

By following the methods

#element{
-webkit-transform: translate3d(0,0,0);
z-index: 999;
}

But than doesn't help here!? No positioning the method within the <style /> fixes it.
Just for completeness here is the last definition I used:

[{"id":"0fb520c25469b9bf","type":"tab","label":"Modal Test","disabled":false,"info":"","env":[]},{"id":"0adc62f254fe565a","type":"ui_text","z":"0fb520c25469b9bf","group":"db5030bb15132bad","order":1,"width":6,"height":1,"name":"Text field1","label":"Text field1","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":500,"y":220,"wires":[]},{"id":"ed9715e613652bb2","type":"ui_text","z":"0fb520c25469b9bf","group":"db5030bb15132bad","order":3,"width":6,"height":4,"name":"Text field2","label":"Text field2","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":500,"y":260,"wires":[]},{"id":"491e302da4344bfa","type":"ui_template","z":"0fb520c25469b9bf","group":"db5030bb15132bad","name":"","order":2,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>\n\n<style>\n    #myinfos{\n    -webkit-transform: translate3d(0,0,0);\n    z-index: 999;\n    }\n\n\n    /* The Modal (background) */\n    .modal {\n    --mwidth: 300px;\n    \n    display: block;              /* Hidden by default */\n    position: fixed;            /* Stay in place */\n    z-index: 2000;              /* Sit on top */\n    left: 0;\n    top: 0;\n    margin-top: 80px;\n    width: var(--mwidth);\n    margin-left: calc((100% - (var(--mwidth)))/2);\n    height: 260px;\n    \n    overflow: auto;              /* Enable scroll if needed */\n    background-color: rgb(0, 0, 0);         /* Fallback color */\n    background-color: rgba(0, 0, 0, 0.4);   /* Black w/ opacity */\n    }\n    \n    /* Modal Content */\n    .modal-content {\n    background-color: #fefefe;\n    padding: 12px;\n    border: 1px solid #888;\n    }\n\n</style>\n\n<span>Template in the middle </span>\n\n<span id=\"myinfos\" class=\"modal\" style=\"margin-left: 220px;\">The modal section </span>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"myinfos","x":320,"y":220,"wires":[[]]},{"id":"db5030bb15132bad","type":"ui_group","name":"Modal Testing","tab":"ce82cf5f4b6be9ac","order":6,"disp":false,"width":"6","collapse":false,"className":""},{"id":"ce82cf5f4b6be9ac","type":"ui_tab","name":"Modal Testing","icon":"dashboard","order":8,"disabled":false,"hidden":false}]

Any error in there?

5

Try if using the dialog element works. Bare minimal example.

[{"id":"725132ab5ce167c7","type":"ui_template","z":"0fb520c25469b9bf","group":"a1f973ae2df1ee2c","name":"","order":4,"width":0,"height":0,"format":"<dialog id=\"modaldialog\">\n    <h1>Dialog Title</h1>\n    <p>This is a simple dialog. </p>    \n    <button id=\"closemodal\">Close</button>\n</dialog>\n\n\n<script>\n    (function(scope) { \n      let lastTimestamp = 0  \n  scope.$watch('msg', function(msg) {\n    if (msg) {    \n        if(msg.payload == \"open\"){\n          console.log(msg,this.lastTimestamp)\n          if(msg.timestamp == this.lastTimestamp){\n            return\n          }\n          this.lastTimestamp = msg.timestamp\n          const modal = document.getElementById('modaldialog')\n          const close = document.getElementById('closemodal')\n          modal.showModal()\n          close.addEventListener('click',()=>{modal.close()})\n        }     \n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":680,"y":440,"wires":[[]]},{"id":"377fc150fe93921c","type":"inject","z":"0fb520c25469b9bf","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"open","payloadType":"str","x":290,"y":460,"wires":[["a0170cf75bf40d34"]]},{"id":"be7556fdc6714973","type":"ui_button","z":"0fb520c25469b9bf","name":"","group":"a1f973ae2df1ee2c","order":0,"width":0,"height":0,"passthru":false,"label":"open dialog","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"open","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":420,"wires":[["a0170cf75bf40d34"]]},{"id":"a0170cf75bf40d34","type":"function","z":"0fb520c25469b9bf","name":"prevent auto-opening","func":"msg.timestamp = Date.now()\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":440,"wires":[["725132ab5ce167c7"]]},{"id":"a1f973ae2df1ee2c","type":"ui_group","name":"Default","tab":"1a6139a8088a1a6c","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"1a6139a8088a1a6c","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
6

Thanks for the hint & example!

I was not aware of .showModal() :smiling_face_with_tear: A new day ... a new learning
Will try to change my coding with it!

7

As a supplement to Dialog / showModal()
In addition to a <button />, the esc key can also be used for closing the dialog.
The MDN description of "Dialog" says that the modal window is shown on top of all other elements with disabling their functions. Interestingly, further modal dialogs can be called up from the first opened modal dialog. This results in "stacking" of the dialogs. Only the topmost dialog is active.
Interesting solution.

NB: The first answers suggested the use of z-index. This does not work at all with iPhone/OSX for "stacking" the dialogs/windows.

8

Not entirely true but depends heavily on html structure and CSS treatment. Case is that for dashboard we are in forced position and must respect html structure and surrounding css rules. That doesn't let us to be fully creative to handle such edge cases.

1 Like