# Custom Dashboard node without md-card - possible?

**URL:** <https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919>\
**Category:** Developing Nodes\
**Created:** [29 August 2019 16:30 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919 "2019-08-29T16:30:00Z")\
**Posts on this page:** 20\
**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:** [29 August 2019 16:30 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/1 "2019-08-29T16:30:00Z")

</div>

Hi folks,

Steve ( @Steve-Mcl ) and I are developing [node-red-contrib-ui-contextmenu](https://github.com/bartbutenaers/node-red-contrib-ui-contextmenu).

This ui node generates a simple “ **div** ” and “ **ul** ” element, which is filled and styled afterwards as soon, when a context menu needs to be showed somewhere in the Node-RED dashboard.

```auto
var html = String.raw`
            <style>
                …
            </style>
            <div …>
                <ul class="menu-options">
                </ul>
            </div>
`;

```

This works fine. However the dashboard generates a wrapping “ **md-card** ” element, which uses some **empty space** in the dashboard.

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

That is however not what we want, since our contextmenu widget won't be displayed there...  
Does anybody knows how we can solve this?

P.S. If I’m not mistaken, the dashboard’s _audio_ widget also doesn’t take any space??

Thanks a lot!!  
Bart

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [29 August 2019 16:38 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/2 "2019-08-29T16:38:35Z")

</div>

> [@BartButenaers](#):
>
> our contextmenu widget won't be displayed there

But how do you know where they will be displayed ? Have you consider using CSS pseudo elements Like ::before ::after ?

---

<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:** [29 August 2019 17:20 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/3 "2019-08-29T17:20:44Z")

</div>

Hei Andrei,  
We developed the contextmenu node to support popup menus in our svg-node: when an svg shape is clicked, we send an output message which contains the click coordinates. Our users can - if they want - wire that message to our contextmenu node, which displays an appropriate context menu at that location. There will be - most probably - other use cases for the contextmenu node, but that is how we use it at this moment.

But it is annoying that it uses space at a location in the dashboard, since we will never show the menu at that location. So hopefully somebody has a solution...

---

<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:** [30 August 2019 13:18 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/4 "2019-08-30T13:18:31Z")

</div>

@BartButenaers

The ui\_template node has an option "add to head" that doesnt take up any space on the dashboard.

I wonder is it possible that if we set `templateScope` to "global" would we be able to insert items into `<body>` and would the `send()` & `$scope` functionality still work?

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [30 August 2019 15:37 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/5 "2019-08-30T15:37:46Z")

</div>

What you guys are doing is awesome. I am subscribed to the github notifications and find astonish how fast you are moving (faster than I can follow up). Assuming that there is no way to add the node without adding extra space (which I believe it is the case for the Dashboard), can´t you consider another possibilities ? Perhaps something along the lines of below snippet ? In such case the context menu would be code doing CSS manipulations basically. Again, this is just a shot in the dark, I had no time to stop to read what you have already done.

```auto
[{"id":"6c1b6c44.995624","type":"ui_template","z":"58634fa3.16dc6","group":"3dfd1195.df4f4e","name":"","order":5,"width":"6","height":"12","format":"<!DOCTYPE html>\n<html>\n<head>\n<style> \n\n.dropdown {\n position: relative;\n display: inline-block;\n}\n\n.dropdown-content {\n display: none;\n position: absolute;\n min-width: 200px;\n background-color: #ff0000;\n z-index: 1;\n}\n\n.dropdown-content li {\n color: black;\n\n}\n\n\n</style>\n\n</head>\n\n<body>\n\n<div class=\"dropdown\">\n\n<svg width=\"200\" height=\"50\" onclick=\"myFunction()\">\n <rect x=\"0\" y=\"0\" width=\"200\" height=\"50\" fill=\"white\"/>\n <text x=\"10\" y=\"25\" fill=\"red\">This is an SVG element</text>\n</svg>\n\n\n <div class=\"dropdown-content\" id=\"myDIV\">\n<ul >\n <li>Coffee</li>\n <li>Tea</li>\n <li>Milk</li>\n</ul>\n</div>\n\n\n</div>\n\n<script>\nfunction myFunction() {\n var x = document.getElementById('myDIV');\n if (x.style.display === 'none') {\n x.style.display = 'block';\n } else {\n x.style.display = 'none';\n }\n}\n</script>\n\n</body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":120,"wires":[[]]},{"id":"3dfd1195.df4f4e","type":"ui_group","z":"","name":"T1","tab":"d50effcd.c6b68","disp":false,"width":"16","collapse":false},{"id":"d50effcd.c6b68","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":9}]

```

---

<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:** [30 August 2019 18:24 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/6 "2019-08-30T18:24:54Z")

</div>

Hi Andrei, thanks for taking the time to assist. I will look at what you are proposing when I get a minute.

Perhaps an image may help...  
 ![menu](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bdec0d9a7217977f6b2684ae3cd8ec18484f4a08.gif)

We add the context menu to the body of the document from within our custom node. Upon a `msg`, we call its function to show it. The `md-card` is pretty much unused but is still present on the page taking up space.

If the dashboard has a way of letting a custom node add to the page (head and body) without generating the md-card (perhaps zero width/zero height) & still permits the ability to `send()` a `msg` - this is what we are looking for. NOTE: zero height/width doesnt work ☹

I suspect it isnt currently possible but hope we find a way.

For anyone insterested in the graphic - the camera, apple, ambulance etc are all font-awsome icons in svg `<text>` elements. The fly out box with pencil, star and circle are an SVG `<g>` group animated to show/hide by our nodes animation capabilities. The context menu is HTML and can be built statically or dynamically (by msg.menu). The SVG node has a list of actions that feed a `msg` to the contextmenu node to make it appear.

---

<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:** [30 August 2019 18:30 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/7 "2019-08-30T18:30:57Z")

</div>

> [@BartButenaers](#):
>
> P.S. If I’m not mistaken, the dashboard’s _audio_ widget also doesn’t take any space??

Ah - I missed that comment

I'll take a look at that later (beer time 🍻)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 August 2019 18:49 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/8 "2019-08-30T18:49:47Z")

</div>

Sadly the audio node is a core widget. Extra widgets are all baed around the template widget and that detects if there is any html inside itself and assumes that if there is then it must be added to the screen. We use 0 to mean automatic so by default that then defaults to one unit height.

---

<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:** [30 August 2019 18:57 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/9 "2019-08-30T18:57:03Z")

</div>

Thanks for taking the time to reply. Appreciated.

Have you any thoughts on how we might achieve this?

Cheers.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 August 2019 19:49 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/10 "2019-08-30T19:49:20Z")

</div>

Given that I default it to 1 unit high in a hacky way - I can also add a hacky way to set it to 0 - but it would not be in existing dashboards etc... so not ideal (in many ways).

---

<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:** [30 August 2019 19:56 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/11 "2019-08-30T19:56:31Z")

</div>

That would help for new users.

Perhaps -1 would equate to no md-card? Or undefined?

I would appreciate it as we have ideas for other similar functioning nodes.

Please let us know either way.

---

<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:** [30 August 2019 20:12 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/12 "2019-08-30T20:12:56Z")

</div>

Properties with negative values for width and height will be just ignored

---

<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:** [30 August 2019 20:18 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/13 "2019-08-30T20:18:35Z")

</div>

Hi,

Sorry if I wasnt clear, I meant if when the widget is initialised and -1 or undefined is specified then the same funky workaround @dceejayusee for the audio UI widget could possibly be applied. (of course this depends on the workaround be added to dashboard).

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 August 2019 21:22 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/14 "2019-08-30T21:22:15Z")

</div>

OK -have pushed to master - if config.height == -1 then it should set it to 0 height...

---

<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:** [30 August 2019 21:25 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/15 "2019-08-30T21:25:43Z")

</div>

Thanks a lot Dave!!!!  
We will test that this weekend.  
And for existing dashboards, we will mention in our readme file: "_if you upgrade to dashboard version xx, the empty space problem will be solved_".

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 August 2019 21:27 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/16 "2019-08-30T21:27:22Z")

</div>

well - we don't know it works yet...

---

<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:** [30 August 2019 21:39 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/17 "2019-08-30T21:39:38Z")

</div>

I'm already positive, based on extrapolation of the quality of your fixes in the past 🤥 🤣

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 August 2019 21:41 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/18 "2019-08-30T21:41:14Z")

</div>

Hah. If I wrote it properly in the first place I wouldn’t need to fix it !

---

<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:** [30 August 2019 23:19 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/19 "2019-08-30T23:19:59Z")

</div>

Thank you so much. Will test tomorrow (hopefully) and let you know.

Ps, on a related note, I noticed the audio node still appears in the layout editor (even though you can't set the size of the audio node) would it be something you could handle - e.g if height/width is zero, don't show it in the dashboard layout? No Biggie, just for completeness.

---

<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:** [24 September 2019 21:59 UTC](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919/20 "2019-09-24T21:59:41Z")

</div>

Allmost forgotten ...  
In case anybody ever needs this feature, Dave (@dceejay) has been so kind to fix this last week in dashboard version **2.16.3**.

We only had to do the following changes to our UI contribution node, to get a height of 0 in the dashboard:

1. We had to remove the "_Size_" property from our config screen:

2. The accompanying popup dialog (with the size selector) could also be removed from the `oneditprepare` function:

3. And the height had to be set to _ **-1** _:

As a result Dave's fix even doesn't generate an `md-card` element in the dashboard, so it takes no space at all...