It has become very clear that I will never receive a Nobel Prize in styling, layouting, CSS, ...
For my new contribution node-red-contrib-ui-camera, I want a 'canvas' tag that displays my camera images (so I can draw all kind of custom graphics stuff on top of those images). In my current version the HTML part is very short:
<canvas id="cameraCanvas" width="100%" height="100%" ng-init='init(` + configAsJson + `)'></canvas>
The video stream is decoded nicely, and those decoded images are drawn onto this canvas.
But for some obscure reason the canvas had a wrong height:
So I tried the nice tips from @steuck13, but must have done something wrong because it became worse. So I changed my code back to my original version, but I must have forgotten something because now the canvas has become awfull small with annoying scrollbars:
Here you can see the size of the canvas:
And it's parent element is also very small, although I 'think' I cannot influence that (except with my 100% perhaps?):
Below is my 'size' setting, but to be honest I have no clue at all how I should take this setting into account in my styling:
Any help to get this integrated nicely into the dashboard is HIGHLY appreciated !!!