Want to override .nr-dashboard-theme for custom widgets

Hi. I'm fairly new to Node-red and definitely new here (I just joined...)

I apologize in advance if this is a dumb question, but I'm trying to import custom widgets code into the dashboard and I noticed that even though the dashboard columns are over 300 pixels wide, any widget that I put in is limited to 210 pixels in width, leaving a blank space to the right. Anything larger is still accessible, but via vertical and horizontal scroll bars. I'm looking for a simple way to use the whole width of the column. Can someone point me in the right direction? thanks.

This is the widget code:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
    Highcharts.chart('container', {
    chart: {
        type: 'gauge',
        plotBorderWidth: 2,
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops:[[0, '#FFF4C6'],[0.3, '#FFFFFF'],[1, '#FFF4C6']]
        plotBackgroundImage: null,
        height: 180
    title: {
        text: 'VU meter',
        margin: 0
        startAngle: -40,
        endAngle: 40,
        background: null,
        center: ['51%', '125%'],
        size: 200
    exporting: {enabled: false},
    tooltip: {enabled: false},
        min: -20,
        max: 6,
        minorTickPosition: 'inside',
        tickAmount: 4,
        tickPosition: 'outside',
        labels: {rotation: 'auto',distance: 15},
            from: 0,
            to: 10,
            color: '#bf2013',
            innerRadius: '100%',
            outerRadius: '108%'
        pane: 0,
            text: 'VU<br/><span style="font-size:8px">Channel A</span>',
            y: -20
            dataLabels: {enabled: false},
            dial: {radius: '110%'}
        name: 'Channel A',
        data: [0],
        yAxis: 0
// Test animation data
function (chart) {
    setInterval(function () {
        if (chart.series)
        { // the chart may be destroyed
            var left = chart.series[0].points[0],
                inc = (Math.random() - 0.5) * 3;
            leftVal = left.y + inc;
            if (leftVal < -20 || leftVal > 6) {leftVal = left.y - inc;}
            left.update(leftVal, false);
    }, 1000);        

and this is the style section

.highcharts-data-table table
  min-width: 250pt;

Hi & welcome.

Can you share a minimal flow (only the parts that demonstrate this)?

To export a part of a flow, select the nodes of interest, press CTRL-E, copy to clip-board, paste into a code-block (described below)


In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

   code goes here 

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

I updated my initial post.

oh... and I also tried/added the Master style override from hotnipi in style which I found here:(Master style override)

If you had done as @Steve-Mcl asked and posted an export of your flow, we could tell:

  • If your VU meter is embedded in a standard ui-template node.
  • How wide in Node-red "units" the dashboard group is.
  • How wide and tall in Node-red "units" the template node is.

But since you didn't I can only guess that it's because the template node does not have a specified width, or it is specified but not wide or tall enough.

I'm not sure you have shared enough CSS to style both width and height either.

Thank you guys for your answers. I thought I did what @Steve-Mcl asked... There's not much more to the flow than what I posted, except for the addition of the Master style override code...

In any event, here's the entire flow.

[{"id":"40431dee4eec0901","type":"ui_template","z":"ac25c7797589190c","group":"01fe50e9e4a3d0e9","name":"Vu-meter","order":2,"width":"4","height":"4","format":"<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n<script src=\"https://code.highcharts.com/highcharts-more.js\"></script>\n<figure class=\"highcharts-figure\">\n    <div id=\"container\"></div>\n</figure>\n<script>\n    Highcharts.chart('container', {\n    chart: {\n        type: 'gauge',\n        plotBorderWidth: 2,\n        plotBackgroundColor:\n        {\n            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n            stops:[[0, '#FFF4C6'],[0.3, '#FFFFFF'],[1, '#FFF4C6']]\n        },\n        plotBackgroundImage: null,\n        height: 180\n    },\n    title: {\n        text: 'VU meter',\n        margin: 0\n    },\n    pane:\n    [{\n        startAngle: -40,\n        endAngle: 40,\n        background: null,\n        center: ['51%', '125%'],\n        size: 200\n     }],\n    exporting: {enabled: false},\n    tooltip: {enabled: false},\n    yAxis:\n    [{\n        min: -20,\n        max: 6,\n        minorTickPosition: 'inside',\n        tickAmount: 4,\n        tickPosition: 'outside',\n        labels: {rotation: 'auto',distance: 15},\n        plotBands:\n        [{\n            from: 0,\n            to: 10,\n            color: '#bf2013',\n            innerRadius: '100%',\n            outerRadius: '108%'\n        }],\n        pane: 0,\n        title:\n        {\n            text: 'VU<br/><span style=\"font-size:8px\">Channel A</span>',\n            y: -20\n        }\n    }],\n    plotOptions:\n    {\n        gauge:\n        {\n            dataLabels: {enabled: false},\n            dial: {radius: '110%'}\n        }\n    },\n    series:\n    [{\n        name: 'Channel A',\n        data: [0],\n        yAxis: 0\n    }]\n},\n// Let the music play\nfunction (chart) {\n    setInterval(function () {\n        if (chart.series)\n        { // the chart may be destroyed\n            var left = chart.series[0].points[0],\n                leftVal,\n                inc = (Math.random() - 0.5) * 3;\n            leftVal = left.y + inc;\n            if (leftVal < -20 || leftVal > 6) {leftVal = left.y - inc;}\n            left.update(leftVal, false);\n            chart.redraw();\n        }\n    }, 1000);        \n});\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":260,"y":120,"wires":[[]]},{"id":"91e7f6944ce30bc7","type":"inject","z":"ac25c7797589190c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":120,"wires":[["40431dee4eec0901"]]},{"id":"23eee029701484ed","type":"ui_template","z":"ac25c7797589190c","group":"","name":"Master style override","order":1,"width":0,"height":0,"format":"<style>\n.highcharts-figure,\n.highcharts-data-table table\n{\n  min-width: 250pt;\n}\n\nbody.nr-dashboard-theme {\n background-color: #333333;\n font-family: Calibri;\n}\nbutton, html, input, select, textarea {\n font-family: Calibri;\n}\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: #d0d0d0;\n}\n\nbody.nr-dashboard-theme md-toolbar {\n background-image: linear-gradient(to right, #404040, #737373);\n box-shadow: 0px 1px 20px #0000008a;\n}\n.nr-dashboard-theme ui-card-panel {\n background-image: linear-gradient(to bottom right, #404040, #737373);\n border: 1px solid #555555;\n box-shadow: 0 0 20px #00000066;\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: #2eb82e;\n text-shadow: 0 0 2px black;\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);\n background-color: #00ad03;\n color: #d0d0d0;\n text-shadow: 0 0 2px #525252;\n border-radius:6px;\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);\n background-color: #00ad03;\n color: #d0d0d0;\n text-shadow: 0 0 2px #525252;\n border-radius:6px;\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #00de00;\n}\n\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n}\n.nr-dashboard-button .md-button {\n box-shadow: 0 1px 3px 0 rgba(0,0,0,.26)!important;\n width: 100%!important;\n height: 100%!important;\n margin: 0!important;\n min-width: 0!important;\n min-height: 0!important;\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n border-style: none;\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background-color: #33333300;\n color:#d0d0d0;\n}\n\n.nr-dashboard-numeric .value {\n font-weight: 700;\n text-align: center;\n border: 0;\n}\n\n\n.nr-dashboard-form {\n display: inline-block;\n width: 100%;\n overflow-y: visible;\n}\n#SETTINGS_TEATED_cards {\n min-height: 300px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","className":"","x":120,"y":60,"wires":[[]]},{"id":"01fe50e9e4a3d0e9","type":"ui_group","name":"Vu-meter","tab":"fe9c1c2dd62aa177","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fe9c1c2dd62aa177","type":"ui_tab","name":"Meters","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

Your template is set to 4 units wide, 4 units high.
Default unit size is 48px.

Change the template to 6x5.

1 Like

I knew it had to be something simple... but I just couldn't figure it out! :face_with_spiral_eyes:
thanks !

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