# Custom UI node - layout problems

**URL:** <https://discourse.nodered.org/t/custom-ui-node-layout-problems/7731>\
**Category:** Developing Nodes\
**Created:** [8 February 2019 00:10 UTC](https://discourse.nodered.org/t/custom-ui-node-layout-problems/7731 "2019-02-08T00:10:26Z")\
**Posts on this page:** 1\
**Showing post:** 20

<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:** [14 February 2019 22:54 UTC](https://discourse.nodered.org/t/custom-ui-node-layout-problems/7731/20 "2019-02-14T22:54:30Z")

</div>

> [@dceejay](#):
>
> It's the other way round... your styling needs to work within the space allocated to the widget - so 100%x100% is probably a good starting point.

Dave (@dceejay),  
I now have another custom UI node, where I have a similar problem.  
However it doesn't work, which is evidence nr A that I still don't get how it works 😭

The html string contains only a single div (of 100% width and height):

```auto
var html = String.raw`
    <script src="heatmap/js/heatmap.min.js"></script>
    <div id="heatMapContainer` + config.id + `" width="100%" height="100%" ng-init='init(` + configAsJson + `)'>
`;

```

P.S. I have added the node's id to the name, to make it unique (in case multiple of those UI nodes are being added to the dashboard) ...

Then I need to call a third party library, _which expects that parent div element as input_:

```auto
var parentDiv = document.getElementById('heatMapContainer' + config.id)
$scope.heatMapInstance = h337.create({
       container: parentDiv
});

```

As you can see from their documentation, their heatmap canvas would automatically adapt to the parent element:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0f6b95c42b72de6c0884ce41f0e91ca7e000c67d.png)

But now I need to draw heat points on that heat map (with X and Y coordinates), so I need to have the available area to draw on (width and height). Thought that the dashboard would have set the size (in pixels) of my div tag, but that is not the case:

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

Any ideas or suggestions?

---

_[View the full topic](https://discourse.nodered.org/t/custom-ui-node-layout-problems/7731)._