# Modal element above others -- Platform problem

**URL:** <https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501>\
**Category:** Dashboard\
**Created:** [25 April 2024 20:45 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501 "2024-04-25T20:45:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [25 April 2024 20:45 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/1 "2024-04-25T20:45:44Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49b61273252fb2af7cc926eb75426b705d612047.png) FX  
 ![modal_testing_iPhone1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7cdea68989b9d56af979bcd97ad74aeb2b9a2a5e.png) iPhone

See these nodes:

```auto
[{"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?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [26 April 2024 04:53 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/2 "2024-04-26T04:53:09Z")

</div>

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.

```auto
.modal{z-index:10}

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 April 2024 05:38 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/3 "2024-04-26T05:38:58Z")

</div>

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..

> **[Learn about the CSS z-index property and how to use it to fix z-index issues...](https://ecomgraduates.com/blogs/news/fixing-z-index-issue-on-safari-browser)**
>
> If you're a web developer, you're probably well aware of the numerous challenges that come with cross-browser compatibility. One of the most common issues that web developers face is the z-index problem on the Safari browser. This issue arises when...

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [26 April 2024 07:10 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/4 "2024-04-26T07:10:16Z")

</div>

@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:

```auto
[{"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?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 April 2024 07:49 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/5 "2024-04-26T07:49:57Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [26 April 2024 10:38 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/6 "2024-04-26T10:38:55Z")

</div>

Thanks for the hint & example!

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

> **[HTMLDialogElement: showModal() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)**
>
> The showModal() method of the
> HTMLDialogElement interface displays the dialog as a modal, over the top
> of any other dialogs that might be present. It displays in the top layer, along with a
> ::backdrop pseudo-element. Interaction outside the...

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [26 April 2024 15:13 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/7 "2024-04-26T15:13:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 April 2024 16:40 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/8 "2024-04-26T16:40:06Z")

</div>

> [@gNeandr](#):
>
> The first answers suggested the use of `z-index`. This does not work at all with iPhone/OSX for "stacking" the dialogs/windows

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 May 2024 16:40 UTC](https://discourse.nodered.org/t/modal-element-above-others-platform-problem/87501/9 "2024-05-10T16:40:27Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.