Node-red-contrib-ui-svg produces scrollbars

[Mr_M_from_K]

Hello,
I am doing a very small and simple ui-svg but still can't get it to the dashboard properly. It seems "something" is adding extra pixels to the left and at the top and bottom, so that I end up with scrollbars.
Here is my node: it is a simple switch with the animation opening and closing the rocker. The svg should be displayed on 1x2 widget boxes, each 32x32 in size and it should touch the left and right side of this area. But there is space on the left side and at the top and bottom (I added a blue background to show this)
If I reduce to x="0" y="0" width="26" height="58" the scrollbars disappear but the svg does not fill the area.
Any help is welcome, thanks a lot

Martin

[
    {
        "id": "d73ab57d.847a98",
        "type": "ui_svg_graphics",
        "z": "548657c5.9af4d8",
        "group": "bd825302.06d21",
        "order": 7,
        "width": 1,
        "height": 2,
        "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" width=\"26\" height=\"58\" viewBox=\"0 0 32 64\" preserveAspectRatio=\"xMidYMid meet\">\n<rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"32\" height=\"64\" style=\"fill:cornflowerblue;stroke:none;\"/>\n\n<line id=\"rocker\" x1=\"5\" y1=\"32\" x2=\"27\" y2=\"32\" style=\"stroke: black; stroke-width:2px;fill:none;\"/>\n<circle id=\"circ1\" cx=\"5\" cy=\"32\" style=\"stroke: black; stroke-width:2px;fill:white;\" r=\"4\"/>\n<circle id=\"circ2\" cx=\"27\" cy=\"32\" style=\"stroke: black; stroke-width:2px;fill:white;\" r=\"4\"/>\n\n</svg>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [
            {
                "id": "open",
                "targetId": "rocker",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "rotate",
                "fromValue": "0, 5,32",
                "toValue": "-45,5,32",
                "trigger": "msg",
                "duration": "1",
                "durationUnit": "ms",
                "repeatCount": "1",
                "end": "freeze",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            },
            {
                "id": "close",
                "targetId": "rocker",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "rotate",
                "fromValue": "0, 5,32",
                "toValue": "0,5,32",
                "trigger": "msg",
                "duration": "1",
                "durationUnit": "ms",
                "repeatCount": "1",
                "end": "freeze",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            }
        ],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": 150,
        "name": "SPST",
        "x": 570,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "bd825302.06d21",
        "type": "ui_group",
        "z": "",
        "name": "Dashboard",
        "tab": "17d09b07.741a55",
        "order": 1,
        "disp": false,
        "width": "35",
        "collapse": false
    },
    {
        "id": "17d09b07.741a55",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "Dashboard",
        "disabled": false,
        "hidden": false
    }
]

[Steve-Mcl]

!st things 1st, your flow is completely un-useable. In order to make code more readable and importable it is important to surround your code with three backticks
```
like this
```

You can edit and correct your post by clicking the pencil icon.

See this post for more details - How to share code or flow json

[Steve-Mcl]

2ndly, it is probably dashboard default padding.

you can see for yourself using the browsers developer tools (F12)

If you want to change that, add a ui-template node and custom CSS that overrides the padding

[Mr_M_from_K]

Thanks for the hint, I'm a newbie here... I hope it is better now.

[Mr_M_from_K]

Hi Steve-Mcl,
I tried to set padding, margin and border to 0px. This removed the horizontal scroll bar and I can increase the height value to 60 to also remove the vertical scroll bar. I could get along with this for that case, still would be glad to have a solution that always works.
Thanks for any help
Martin

[Mr_M_from_K]

Hi Steve,

now I checked it with the browsers developer tools but with the same result. I need to have space at the bottom of the svg otherwise I get a vertical scroll bar. Here is the HTML code I took from the browser:

<div class="ui-svg ng-scope" id="svggraphics_ca6c7f0f.843eb" ng-init="init({";id";:";ca6c7f0f.843eb";,";type";:";ui_svg_graphics";,";z";:";3954592c.8f2936";,";group";:";bd825302.06d21";,";order";:7,";width";:1,";height";:2,";clickableShapes";:[],";javascriptHandlers";:[],";smilAnimations";:[{";id";:";open";,";targetId";:";rocker";,";classValue";:";";,";attributeName";:";transform";,";transformType";:";rotate";,";fromValue";:";0, 5,32";,";toValue";:";-45,5,32";,";trigger";:";msg";,";duration";:";1";,";durationUnit";:";ms";,";repeatCount";:";1";,";end";:";freeze";,";delay";:";1";,";delayUnit";:";s";,";custom";:";";},{";id";:";close";,";targetId";:";rocker";,";classValue";:";";,";attributeName";:";transform";,";transformType";:";rotate";,";fromValue";:";0, 5,32";,";toValue";:";0,5,32";,";trigger";:";msg";,";duration";:";1";,";durationUnit";:";ms";,";repeatCount";:";1";,";end";:";freeze";,";delay";:";1";,";delayUnit";:";s";,";custom";:";";}],";bindings";:[],";showCoordinates";:false,";autoFormatAfterEdit";:false,";showBrowserErrors";:false,";showBrowserEvents";:false,";enableJsDebugging";:false,";sendMsgWhenLoaded";:false,";outputField";:";payload";,";editorUrl";:";//drawsvg.org/drawsvg.html";,";directory";:";";,";panning";:";disabled";,";zooming";:";disabled";,";panOnlyWhenZoomed";:false,";doubleClickZoomEnabled";:false,";mouseWheelZoomEnabled";:false,";dblClickZoomPercentage";:150,";name";:";SPST";,";x";:570,";y";:80,";wires";:[[]],";_alias";:";d73ab57d.847a98";})" style="width:100%; height:100%;">
<svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x="0" y="0" width="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 64" height="60">
<rect id="svgEditorBackground" x="0" y="0" width="32" height="64" style="fill:cornflowerblue;stroke:none;"></rect>

When hovering over the <div class="ui-svg ng-scope"... it highlights an area of 32x64 pixels, when hovering over the <svg .. it highlights an area of 32x60 pixels, as given in the respective sections. There is a white area of 4 pixels height below the svg. As soon as I change height="60" to more than 60 I get a vertical scroll bar. Margin and padding is 0, border is none.
The scrollbar is added to the

<md-card ui-template="me.item.format" ui-card-size="1x2" class="nr-dashboard-template ng-scope _md visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" ng-show="true" aria-hidden="false" style="left: 192px; top: 416px; width: 32px; height: 64px;">

containing the above elements. Setting the mentioned height to 61 the scrollbar allows me to scroll just 1 pixel.
So it seems to me there is a 4 pixels high element added somewhere, corresponding to that I see a hint "overflow" at section <div class="ui-svg ng-scope"
But I can't find this 4 pixels high element it must be somewhere inside the class ui-svg ng-scope.

So if someone knows how to fix that it would be welcome
Thanks a lot
Martin