# Dynamically hide or show custom UI node content
**URL:** https://discourse.nodered.org/t/dynamically-hide-or-show-custom-ui-node-content/18897
**Category:** Developing Nodes
**Created:** [8 December 2019 07:43 UTC](https://discourse.nodered.org/t/dynamically-hide-or-show-custom-ui-node-content/18897 "2019-12-08T07:43:38Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [8 December 2019 07:43 UTC](https://discourse.nodered.org/t/dynamically-hide-or-show-custom-ui-node-content/18897/1 "2019-12-08T07:43:39Z")
Hi folks,
In my new custom UI node I would like to be able to hide or show my component dynamically. We had a rather similar [discussion](https://discourse.nodered.org/t/custom-dashboard-node-without-md-card-possible/14919) some time ago, but then we wanted "_always_" to hide or show the content.
This is how it works:
1. The UI node shows its content, i.e. a DIV element with a video element inside.
2. The user clicks a button to hide the video.
3. My UI node sends a message to my client-side to hide the content.
4. In the client side, I hide the video element by removing it from its parent (i.e. the div element):
```auto
// Watch input messages arriving from the Node-RED flow
$scope.$watch('msg', function(newVal, oldVal) {
...
switch(newVal.payload) {
case "show_video":
// Add the video element to the DOM tree
$scope.divElement.appendChild($scope.videoElement);
break;
case "hide_video":
// Remove the video element from the DOM tree
$scope.divElement.removeChild($scope.videoElement);
break;
}
})
```
As you can see in the screenshot, the video element is hidden but the empty space remains.
When I look in the Chrome inspector, I see indeed (while my div has height 100%) that the **md-card** element has fixed dimensions in pixels:
Is there any way around this?
**[EDIT]** or is this against the whole md-card dimension mechanism of the dashboard. Should I instead workaround it by show a dummy image (e.g. like 'press to start playing ...')?
Thanks !!!
Bart
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [8 December 2019 08:26 UTC](https://discourse.nodered.org/t/dynamically-hide-or-show-custom-ui-node-content/18897/2 "2019-12-08T08:26:36Z")
Yes fairly much against the design. Groups of nodes are a fixed size. You can hide the entire group or not. Having widgets resize can lead to the layout changing completely which would be very annoying.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [8 December 2019 08:39 UTC](https://discourse.nodered.org/t/dynamically-hide-or-show-custom-ui-node-content/18897/3 "2019-12-08T08:39:27Z")
> [@dceejay](#):
>
> would be very annoying
Can understand that! Will workaround it then by showing dummy content. The whole idea in this case is that I don't want to empty the smartphone battery, by always displaying video.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [8 December 2019 08:44 UTC](https://discourse.nodered.org/t/dynamically-hide-or-show-custom-ui-node-content/18897/4 "2019-12-08T08:44:48Z")
AFAIK smartphones are pretty efficient at showing video.. I can watch movies no problem. Its the data transfer that kills the battery