# I am unable to make responsive gauge or ui\_template

**URL:** <https://discourse.nodered.org/t/i-am-unable-to-make-responsive-gauge-or-ui-template/75014>\
**Category:** General\
**Tags:** dashboard, uibuilder\
**Created:** [10 February 2023 20:58 UTC](https://discourse.nodered.org/t/i-am-unable-to-make-responsive-gauge-or-ui-template/75014 "2023-02-10T20:58:40Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 February 2023 20:36 UTC](https://discourse.nodered.org/t/i-am-unable-to-make-responsive-gauge-or-ui-template/75014/22 "2023-02-18T20:36:45Z")

</div>

> [@Jayeshpitale1](#):
>
> i didnt saw what i posted sorry for misunderstanding i apologize

Not really a problem, it is just that the code you shared is irrelevant as far as I can tell?

> [@Jayeshpitale1](#):
>
> i wanted to make a div inside div i want a text and the gauge but the problem is when i add a div the gauge width and height remains the same from the js so i cant make it responsive and i cant call the msg.topic to text so can you give me some example how to do it

This is all HTML and CSS stuff rather than uibuilder. And much depends on how responsive the gauge library is.

The examples shared earlier create the gauge but assume a given size. That's because the gauge library seems to want a set size. But I've not played with it to see if it can be more flexible in sizing, you should read through their docs to find out and have a play yourself.

Nesting `div`s inside each other is standard HTML so not a problem. Sizing of HTML elements is mostly down to CSS so you might want to do some reading up of that. uibuilder can help with all of that but with the current version, you mostly still need to know a bit of HTML and CSS to get by.

---

<div class="post-metadata">

**Author:** ![Jayeshpitale1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayeshpitale1/32/70216_2.png) [@Jayeshpitale1](https://discourse.nodered.org/u/Jayeshpitale1)\
**Post date:** [25 February 2023 17:23 UTC](https://discourse.nodered.org/t/i-am-unable-to-make-responsive-gauge-or-ui-template/75014/23 "2023-02-25T17:23:59Z")

</div>

```auto
// @ts-nocheck

'use strict'

// https://github.com/Mikhus/canvas-gauges
var gauge = new RadialGauge({
    renderTo: 'gauge-radial-1',
    highlights: [
        { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
        { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
        { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
    ],
    width: 300,
    height: 300,
    units: "°C",
    minValue: 0,
    maxValue: 100,
    majorTicks: [0,10,20,30,40,50,60,70,80,90,100],
    minorTicks: 10,
    strokeTicks: true,
    colorPlate: "#fff",
    borderShadowWidth: 0,
    borders: false,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needlCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "linear",
    valueBox: true,
    valueInt: 2,
    valueDec: 2,
}).draw()
// var gauge = new LinearGauge({
// renderTo: 'gauge-radial-1'
// }).draw()

// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function(msg) {
    // Dump the msg as text to the "msg" html element
    const eMsg = $('#msg')
    if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg)

    gauge.value = msg.payload
    gauge.update({
        title: msg.topic
    })
})

```

here width and height is not getting responsive as per device i am using could you suggest how to make it responsive width and height

---

<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:** [26 April 2023 17:24 UTC](https://discourse.nodered.org/t/i-am-unable-to-make-responsive-gauge-or-ui-template/75014/24 "2023-04-26T17:24:02Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/i-am-unable-to-make-responsive-gauge-or-ui-template/75014.md?page=1)