# Context menu in dashboard

**URL:** https://discourse.nodered.org/t/context-menu-in-dashboard/14759
**Category:** Dashboard
**Created:** [25 August 2019 07:08 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759 "2019-08-25T07:08:17Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [25 August 2019 07:08 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/1 "2019-08-25T07:08:17Z")

</div>

Hi folks,

I'm trying to develop a dashboard node that shows a popup context menu, that can be displayed at specified X/Y positions in the Node-RED dashboard (on top of the other content).

Based on this [tutorial](https://dev.to/iamafro/how-to-create-a-custom-context-menu--5d7p) I generate a _div_ tag with following style properties:

```auto
position: relative
left: my X position
top: my Y position

```

The one (and most important) thing that I cannot get solved, is the position of the context menu 🥴  
The damn thing always appears BELOW my other content (like the new floorplan UI node), instead of ON TOP of it:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/910e6255649c8521a1c0c99fbd495f3918d032a0.png)  
I 'assume' this is because it is INSIDE an _ **md-card** _ tag (or does that have nothing to do with my issue???):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0a8250a0bab6ebf6bf5c2131100d782225d372f4.png)  
Have been searching around a bit, and it seems that Angular materials has its own [menu](https://material.angular.io/components/menu/overview#customizing-menu-position) that can be showed at a specific position. But I 'assume' I cannot use that, since the md-card is generated by the dashboard around my custom UI contribution?? No idea to be honest ...

Does anybody have an idea how I can solve this??

Thanks !!!  
Bart

---

<div class="post-metadata">

### Author: ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)
#### Post date: [26 August 2019 04:50 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/2 "2019-08-26T04:50:54Z")

</div>

Have you tried setting a high value z-index property so its stack order will be on top of other elements?

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [26 August 2019 06:34 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/3 "2019-08-26T06:34:52Z")

</div>

@hugobox,  
Thanks for responding!

Last night I found a solution that seemed to work. Simplified:

```auto
function HTML(config) {
     var html = String.raw`
        	<style>
                .menu {
                    ...
                    position: fixed;
                    z-index: 99000 !important;
                    ...
                }
            </style>
            <div class="menu";>
                <ul class="menu-options">
                </ul>
            </div>
        `;
                        
     return html;
};

```

With position "_absolute_" it still remained below my floorplan. Don't know why ...  
But the look-and-feel of this context menu wasn't really great:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f16a01054b01cf7aaa6d99a95402151920662be5.png)

So I searched for a nicer alternative on the web (with nicer styling), found [one](https://codepen.io/ryanmorr/pen/JdOvYR), and integrated it into my custom ui node code. Simplified:

```auto
function HTML(config) {
        var html = String.raw`
              <style>
                .menu {
                    position: fixed;
                    z-index: 99000 !important;
                    ...
                    -webkit-transform: translate(0, 15px) scale(.95);
                    transform: translate(0, 15px) scale(.95);
                    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
                    ...
                 }
            </style>
            <div>
                <ul class="menu">
                </ul>
            </div>
        `;
                        
        return html;
};

```

Now the context menu looks much better, but it is again below my floorplan (both for position "_fixed_" or "_absolute_"):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/90d964e2e9bad3d0c43e46df97f1c0edadd37640.png)  
In the codepen example you can see that the position is "_absolute_".  
My god, I get frustrated from all that CSS stuff ...

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [26 August 2019 06:44 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/4 "2019-08-26T06:44:27Z")

</div>

In case anybody would like to look at the (experimental) code containing the css styling: [node-red-contrib-ui-contextmenu(branch "_Based-on-codepen-example_")](https://github.com/bartbutenaers/node-red-contrib-ui-contextmenu/tree/Based-on-codepen-example) .

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 August 2019 20:40 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/5 "2019-08-26T20:40:41Z")

</div>

Hi Bart, to close this topic and in case anyone else gets stuck on this, I updated the repo to set the `left` and `top` properties of the `ul` instead of its container `div`

See here ....

> <https://github.com/bartbutenaers/node-red-contrib-ui-contextmenu/blob/09fcce64ba4d5f720c0a26e9d0da040469ee4b83/context_menu.js#L348>

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [26 August 2019 20:53 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/6 "2019-08-26T20:53:58Z")

</div>

Thanks a lot partner! 😉  
Steve figured out that I had to set left/top on the ' **ul**' element instead of on the ' **div**' element ...

---

<div class="post-metadata">

### Author: ![santhosh](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@santhosh](https://discourse.nodered.org/u/santhosh)
#### Post date: [18 November 2020 11:02 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/7 "2020-11-18T11:02:15Z")

</div>

Hi,

I am fresher for node-red, please explain the what is context menu and how is it work in step by step...

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 November 2020 11:45 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/8 "2020-11-18T11:45:58Z")

</div>

Hi, it is a dashboard node. read the extensive and helpful [readme](https://flows.nodered.org/node/node-red-contrib-ui-contextmenu/in/590bc13ff3a5f005c7d2189bbb563976) & give it a go if you find it is what you need. If you get stuck, start a new thread of the forum.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 November 2020 11:46 UTC](https://discourse.nodered.org/t/context-menu-in-dashboard/14759/9 "2020-11-18T11:46:30Z")

</div>