# Div height 0 after deploy

**URL:** https://discourse.nodered.org/t/div-height-0-after-deploy/8336
**Category:** Developing Nodes
**Created:** [24 February 2019 18:59 UTC](https://discourse.nodered.org/t/div-height-0-after-deploy/8336 "2019-02-24T18:59:12Z")
**Posts on this page:** 2
**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: [24 February 2019 18:59 UTC](https://discourse.nodered.org/t/div-height-0-after-deploy/8336/1 "2019-02-24T18:59:12Z")

</div>

Hi folks,

I would like to publish my [node-red-contrib-ui-heatmap](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125) node on npm, but @dceejay reported that it raises following exception:

> DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.

Spend quite some time to it, but cannot figure it out. And the error occurs quite a lot, so it is a blocking issue ...

## How my node works

- I generate an (empty) **DIV** element, which fills the entire space that the dashboard provides me:

```auto
function HTML(config) { 
     <div id="heatMapContainer` + config.id + `" style="width:100%; height:100%;" ng-init='init(` + configAsJson + `)'></div>`;
     return html;
 }

```

- Then I pass this DIV element to the third-party heatmap library, which will add a **CANVAS** as a child element, that fills the enitire space of the DIV element:

```auto
$scope.$watch('msg', function(msg) {
   var parentDiv = document.getElementById('heatMapContainer' + $scope.config.id);
                            
   if (!$scope.heatMapInstance) {
      $scope.h337Config = {
         container: parentDiv,
         ...
      }
                             
      $scope.heatMapInstance = h337.create($scope.h337Config);
   }
}

```

And that works **fine** : a heatmap is displayed and fills nicely the available space on the dashboard.

Remark: I wanted to create the heatmap in the `initController` function. However then the height was `0`, resulting in the same error. So I moved my code here: as soon as the **first message** arrives, I create the heatmap instance, and store it on the AngularJs scope. When a next message arrives, the heatmap instance already exist (on the AngularJs scope) and it will not be created again ...

## Error situation

When I change something in my heatmap node config screen and **deploy** it, then the _ **$scope.heatMapInstance seems to be undefined** _.

**QUESTION 1** : I assume that is normal behaviour, but can somebody please explain a bit how this works ???

Since the heatmap doesn't exist yet (on the AngularJs scope), a new heatmap instance will be created. But **'sometimes' the height of my DIV appears to be 0** (but most of the time it just contains the correct height in pixels):

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

**QUESTION 2** : Does anybody understand why this height is 0 and how I can workaround it???

Thanks a lot !!!!!  
Bart

---

<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 February 2019 21:14 UTC](https://discourse.nodered.org/t/div-height-0-after-deploy/8336/2 "2019-02-25T21:14:42Z")

</div>

I don't 100% understand what is going wrong, but I have found a workaround (which is sufficient for me at this time):

> [@Announce: node-red-contrib-ui-heatmap (beta release)](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/11):
>
> @janek: About the DOMException: it looks to me that the dashboard gives us available height 0 only for a small amount of time (e.g. immediately after a deploy). Right after that small time interval, the height will get the correct value (in pixels). But our heatmap received that correct height not before the next deploy, so until then no heatmap updates were drawn ... I have published a new version node-red-contrib-ui-heatmap@1.0.0-beta.6 which contains a fix for the DOMException. As so…
