Custom UI node - layout problems

Developing Nodes
20

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 :sob:

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

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:

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

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

Any ideas or suggestions?