Context menu in dashboard

Dashboard
1

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 I generate a div tag with following style properties:

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 :woozy_face:
The damn thing always appears BELOW my other content (like the new floorplan UI node), instead of ON TOP of it:
image
I 'assume' this is because it is INSIDE an md-card tag (or does that have nothing to do with my issue???):

image
Have been searching around a bit, and it seems that Angular materials has its own menu 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

2

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

3

@hugobox,
Thanks for responding!

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

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

So I searched for a nicer alternative on the web (with nicer styling), found one, and integrated it into my custom ui node code. Simplified:

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
In the codepen example you can see that the position is "absolute".
My god, I get frustrated from all that CSS stuff ...

4

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

5

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

6

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

1 Like
7

Hi,

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

8

Hi, it is a dashboard node. read the extensive and helpful readme & give it a go if you find it is what you need. If you get stuck, start a new thread of the forum.

1 Like