# Custom ui node containing SVG image not sizing correctly on dashboard

**URL:** <https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [21 May 2024 14:52 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152 "2024-05-21T14:52:57Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 May 2024 14:52 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/1 "2024-05-21T14:52:57Z")

</div>

I am trying to develop a D2 ui node that contains a square SVG image. The problem is that there is a large gap below the image above the next widget in the dashboard unless the widget size is configured as `auto`. If the widget size is configured as, for example, 4x4, then the gap is present.

I have developed a very simple test node and a flow that consists of two svg nodes with text nodes around them that shows the problem. It appears as

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd38eda95d48decb3cb601df96a689fd2c9ee7e3.png)

The upper svg node is sized auto, the lower 4x4. I don't know whether this is a dashboard issue or whether a bit of magic css will sort it, or possibly both I suppose.

If anyone already knows what the problem is then that would be great. If not then if anyone has the time to install the node and give it a go I would be most grateful. It can be installed using  
`npm install colinl/node-red-dashboard-2-ui-test-node`  
Here is the test flow

```auto
[{"id":"330777a7368c0197","type":"ui-test-node","z":"997da33a0beedade","name":"Test node auto","group":"5adfd329078662d5","order":4,"width":"0","height":"0","label":"Some label","myclass":"","x":400,"y":6440,"wires":[]},{"id":"cc6730e201cdd9bc","type":"ui-text","z":"997da33a0beedade","group":"5adfd329078662d5","order":3,"width":0,"height":0,"name":"Text above","label":"Text above auto sized svg","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":390,"y":6380,"wires":[]},{"id":"d7cf2326a6a5509d","type":"ui-text","z":"997da33a0beedade","group":"5adfd329078662d5","order":5,"width":0,"height":0,"name":"Text between","label":"Text between","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":390,"y":6500,"wires":[]},{"id":"ab2c75e1976ab0cc","type":"ui-text","z":"997da33a0beedade","group":"5adfd329078662d5","order":7,"width":0,"height":0,"name":"Text below","label":"Text below 4x4 sized svg","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":390,"y":6620,"wires":[]},{"id":"a840394519d151e1","type":"ui-test-node","z":"997da33a0beedade","name":"Test node 4x4","group":"5adfd329078662d5","order":6,"width":"4","height":"4","label":"Some label","myclass":"","x":400,"y":6560,"wires":[]},{"id":"5adfd329078662d5","type":"ui-group","name":"SVG test","page":"73721cb540947283","width":"5","height":"1","order":-1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"73721cb540947283","type":"ui-page","name":"SVG test","ui":"ID-BASE-1","path":"/svg","icon":"home","layout":"flex","theme":"f9b6670b127dc219","order":1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard"},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

A ui-template containing just the same SVG does not show the problem.

To remove the node again `npm remove @colinl/node-red-dashboard-2-ui-test-node`

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 May 2024 16:29 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/2 "2024-05-21T16:29:41Z")

</div>

What is the size of the group you're wrapping these inside? I'm guessing 6 x 1?

I'd expect the gap to the right of the SVG (given `auto` would make it `width: 6`, and you've specified `width: 4`, but not below it...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 May 2024 19:38 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/3 "2024-05-21T19:38:46Z")

</div>

The group is 5 wide in fact. The top one (auto) is 5x5 as one would expect. The width of the bottom one correct (4), but the total height used is close to 6.

This might be interesting. When I inspect the element the svg div shows the correct size, but when I look at the containing widget div which is

```auto
<div id="nrdb-ui-widget-a840394519d151e1" class="nrdb-ui-widget nrdb-ui-test-node" 
style="display: grid; grid-template-rows: repeat(4, minmax(45px, auto)); 
grid-row-end: span 4; grid-column-end: span 4;">

```

I see this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5cf3ad1cc8e3df49fbfcd49769daaa96ce41ace9.png)

Could it be that SVG is going into the first row of the four, with the three remaining rows below it, instead of the SVG overlaying all four rows?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 May 2024 20:28 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/4 "2024-05-21T20:28:54Z")

</div>

> [@Colin](#):
>
> Could it be that SVG is going into the first row of the four, with the three remaining rows below it, instead of the SVG overlaying all four rows?

That's exactly whats happening, but the SVG element should auto fill the 4 rows given the CSS present and how we render the widgets in a layout.

I'll need to have this running locally to find out more. Great find though

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [21 May 2024 21:33 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/5 "2024-05-21T21:33:53Z")

</div>

> [@Colin](#):
>
> ```auto
> <div id="nrdb-ui-widget-a840394519d151e1" class="nrdb-ui-widget nrdb-ui-test-node" 
> style="display: grid; grid-template-rows: repeat(4, minmax(45px, auto)); 
> grid-row-end: span 4; grid-column-end: span 4;">
> 
> ```

I ran into this [similar issue](https://discourse.nodered.org/t/dashboard-2-not-handling-item-sizing-or-custom-labels-as-expected/87499/11) a little while ago when trying to fit a scalable video player into dashboard 2. As a test, try removing the `auto` (via the browser debug tools) and you will see the space seems normal. I was able to get around this with a little css that I accidentally stumbled across. Also, I had to add an extra container div. Atleast now, I have a custom element that seems to look correct on dashboard 1 and 2. I tried working with your node, but couldn't figure how to update all of that vue stuff to get the stylesheet to do anything, sorry.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 09:42 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/6 "2024-05-22T09:42:39Z")

</div>

Removing `auto` does fix it, thanks, however, I see that @BartButenaers` [svg node](https://github.com/bartbutenaers/node-red-dashboard-2-ui-svg) does not have the problem so I compared the DOM for my node and his.

@joepavitt perhaps you can throw some light on this. As in the provided example node, in my vue file I have

```auto
<template>
    <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
    <div className="ui-test-cl-wrapper">
        <svg ....

```

and @BartButenaers has effectively the same. However, in my DOM this generates

```auto
<div id="nrdb-ui-widget-a840394519d151e1" class="nrdb-ui-widget nrdb-ui-test-node" style="display: grid; grid-template-rows: repeat(4, minmax(45px, auto)); grid-row-end: span 4; grid-column-end: span 4;">
<!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
<div data-v-6e6d8067="" class="ui-test-cl-wrapper">
<svg ....

```

and Barts has the same, except the second div is  
`<div data-v-dfd731c1="" class="ui-svg-wrapper" style="grid-row-end: span 4;">`  
Note that it has the additional style setting that mine does not. I presume the style is passed in from the parent, as mentioned in the comment  
`<!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->`

If I add `style="grid-row-end: span 4;"` into the template then that sorts the problem, but I can't see what is different between Bart's and my nodes that would explain why it is not automatically inserted into my code.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [22 May 2024 09:58 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/7 "2024-05-22T09:58:19Z")

</div>

Hmm, so the purpose of `auto` here is to resize to the content, _if_ the content extends beyond the `45px` limit, this is particularly useful for `ui-template`, `ui-markdown` or `ui-table`, where the height of content can grow.

I'll dig into this in more detail today or tomorrow and trying to work out if there is a more general-purpose fix I can provide as you guys shouldn't need to be concerned with this level of CSS for a third-party node.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 12:52 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/8 "2024-05-22T12:52:01Z")

</div>

I seem to have found a solution. I have changed the container div from  
`<div className="ui-test-cl-wrapper">`  
to  
`<div className="ui-gauge-cl-wrapper" :style="wrapperStyle">`  
with a computed function

```auto
        wrapperStyle: function() {
            let rowSpan = this.props.height
            if (!rowSpan) {
                rowSpan = "null" // size is auto
            }
            return `grid-row-end: span ${rowSpan};`
        },

```

I should not have to do that though, should I?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 May 2024 15:34 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/9 "2024-05-22T15:34:45Z")

</div>

OK, I have worked out why it is ok on @BartButenaers' node. The problem only exists if the widget is built with `NODE_ENV=development`. If that is not present then the `style="grid-row-end: span 4;` is present as it should be.

I have submitted [an issue](https://github.com/FlowFuse/node-red-dashboard/issues/885).

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 June 2024 15:34 UTC](https://discourse.nodered.org/t/custom-ui-node-containing-svg-image-not-sizing-correctly-on-dashboard/88152/10 "2024-06-21T15:34:49Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.