# Red-ui-sidebar-shade hide, prevents added side bar to be clickable

**URL:** <https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961>\
**Category:** Developing Nodes\
**Tags:** javascript\
**Created:** [26 June 2024 07:59 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961 "2024-06-26T07:59:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bfany365](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bfany365/32/92044_2.png) [@bfany365](https://discourse.nodered.org/u/bfany365)\
**Post date:** [26 June 2024 07:59 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/1 "2024-06-26T07:59:09Z")

</div>

Hi

Reading [RED.sidebar : Node-RED](https://nodered.org/docs/api/ui/sidebar/#methods-addTab), I added a side bar and when I open that sidebar, the following html element is added to the sidebar html code:

> "\< div class="red-ui-sidebar-shade hide" style="display: block;"\>"

The above div prevents user from clicking items inside the sidebar, is there any events too register or listen and remove that annoying div ?

---

<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 June 2024 08:20 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/2 "2024-06-26T08:20:16Z")

</div>

Hi, welcome to the forum.

I assume you are creating a new plugin or node with a sidebar?

I also assume you mean this "shade" is visible (blocking) at "certain times" (like when a nodes edit panel is open) - is that your issues? Are you trying to keep the side bar accessible while editing a node?

In the doc you linked to:

> `enableOnEdit` (optional) If set to `true`, this tab will be accessible whilst the edit dialog is open. Default: `false`.

this means the sidebar can be accessed at those times it would otherwise be blocked. e.g. when editing a node or searching, some side bar operations are (and should be) blocked.

---

<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 June 2024 08:43 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/3 "2024-06-26T08:43:54Z")

</div>

Judging by your 2nd post, this is definitely about #Developing Nodes - i will adjust the category to suit.

---

<div class="post-metadata">

**Author:** ![bfany365](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bfany365/32/92044_2.png) [@bfany365](https://discourse.nodered.org/u/bfany365)\
**Post date:** [26 June 2024 09:09 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/4 "2024-06-26T09:09:18Z")

</div>

Thanks for your reply. It worked.

At the moment, it only appears when I double click a flow or a node, is there any event that I can call the "RED.sidebar.addTab" without a need to double click on flow. I mean as soon as the app is ready to use, the new tab can be added ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 June 2024 09:10 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/5 "2024-06-26T09:10:15Z")

</div>

That should happen already if you are defining it in a "plugin" I think.

---

<div class="post-metadata">

**Author:** ![bfany365](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bfany365/32/92044_2.png) [@bfany365](https://discourse.nodered.org/u/bfany365)\
**Post date:** [26 June 2024 09:15 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/6 "2024-06-26T09:15:58Z")

</div>

Unfortunately the plugin I defined did not work. that is why I asked another question in a separate topic:

> [@RED.plugins.registerPlugin is not called](https://discourse.nodered.org/t/red-plugins-registerplugin-is-not-called/88965):
>
> Hi I have developed a simple plugin, the associated js file is never called although the associated html file is loaded. Therefore the code I have for RED.plugins.registerPlugin seems to be never triggered: myplugin.js: module.exports = async function (RED) { RED.httpAdmin.post('/test', RED.auth.needsPermission('notify.write'), async function (req, res) { }); RED.plugins.registerPlugin('myplugin', { type: 'myplugin', onadd: function() { conso…

---

<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 July 2024 09:16 UTC](https://discourse.nodered.org/t/red-ui-sidebar-shade-hide-prevents-added-side-bar-to-be-clickable/88961/7 "2024-07-10T09:16:19Z")

</div>

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