# Some CSS help needed please

**URL:** <https://discourse.nodered.org/t/some-css-help-needed-please/90510>\
**Category:** General\
**Created:** [28 August 2024 16:20 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510 "2024-08-28T16:20:27Z")\
**Posts on this page:** 14\
**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:** [28 August 2024 16:20 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/1 "2024-08-28T16:20:27Z")

</div>

I thought I vaguely understood how CSS works, but I seem to be missing something. I have the following html

```auto
<div id="nrdb-ui-widget-5c62f5086884aedd" class="nrdb-ui-widget nrdb-ui-gauge-classic hide-needle-2"
    style="display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-rows: repeat(3, minmax(var(--widget-row-height), auto)); grid-row-end: span 3; grid-column-end: span min(3, var(--layout-columns));">
    <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
    <div data-v-585800ff="" class="ui-gauge-cl-wrapper testgauge " style="grid-row-end: span 3;"><svg data-v-585800ff=""
            class="cl-gauge" width="100%" height="100%" viewBox="0 0 100 100" style="--dash: 207.25784867432662;">
            <g data-v-585800ff="">
                <path data-v-585800ff="" class="sector" stroke-width="5"
                    d="M 11.090277896272866 77.24488072667465 A 47.5 47.5 0 1 1 88.90972210372712 77.24488072667468"
                    style="stroke-dasharray: 0 0 62.17735460229798 var(--dash); stroke: yellow;"></path>
                <path data-v-585800ff="" class="sector" stroke-width="5"
                    d="M 11.090277896272866 77.24488072667465 A 47.5 47.5 0 1 1 88.90972210372712 77.24488072667468"
                    style="stroke-dasharray: 0 62.17735460229798 82.90313946973063 var(--dash); stroke: red;"></path>
                <path data-v-585800ff="" class="sector" stroke-width="5"
                    d="M 11.090277896272866 77.24488072667465 A 47.5 47.5 0 1 1 88.90972210372712 77.24488072667468"
                    style="stroke-dasharray: 0 145.0804940720286 62.17735460229801 var(--dash); stroke: blue;"></path>
                <path data-v-585800ff="" class="tick-minor" stroke-width="5"
                    d="M 11.090277896272866 77.24488072667465 A 47.5 47.5 0 1 1 88.90972210372712 77.24488072667468"
                    style="stroke-dasharray: 0.5, 3.64516; stroke-dashoffset: 0.25;"></path>
                <path data-v-585800ff="" class="tick-major" stroke-width="5"
                    d="M 11.090277896272866 77.24488072667465 A 47.5 47.5 0 1 1 88.90972210372712 77.24488072667468"
                    style="stroke-dasharray: 1, 19.7258; stroke-dashoffset: 0.5;"></path>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: -125; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4368" _mstHash="129">0</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: -100; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4459" _mstHash="128">1</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: -75; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4550" _mstHash="127">2</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: -50; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4641" _mstHash="126">3</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: -25; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4732" _mstHash="125">4</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: 0; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4823" _mstHash="124">5</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: 25; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="4914" _mstHash="123">6</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: 50; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="5005" _mstHash="122">7</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: 75; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="5096" _mstHash="121">8</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: 100; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="5187" _mstHash="120">9</text></g>
                <g data-v-585800ff="" class="num-wrap"
                    style="--to-x: 50; --to-y: 50; --t-r: 125; --tt-x: 50; --tt-y: 50;"><text data-v-585800ff=""
                        class="num" text-anchor="middle" y="-37" _mstTextHash="9451" _mstHash="119">10</text></g><text
                    data-v-585800ff="" class="label" y="0" x="50%" text-anchor="middle"></text><text data-v-585800ff=""
                    class="measurement" y="34" x="50%" text-anchor="middle" _mstTextHash="43810"
                    _mstHash="130">Meas</text><text data-v-585800ff="" class="units" y="61" x="50%" text-anchor="middle"
                    _mstTextHash="22984" _mstHash="131">°C</text><text data-v-585800ff="" class="value" y="76" x="50%"
                    text-anchor="middle">---</text>
            </g>
            <g data-v-585800ff="" class="o-needle o-needle-1"
                style="transform-box: fill-box; transform-origin: 50% 100%; rotate: -140deg;">
                <path d="M 50,50 48.5,50 49.85,5.280000000000001 50.15,5.280000000000001 51.5,50 z" fill="black"></path>
            </g>
            <g data-v-585800ff="" class="o-needle o-needle-2"
                style="transform-box: fill-box; transform-origin: 50% 100%; rotate: -140deg;">
                <path d="M 50,50 48.5,50 49.85,19.9 50.15,19.9 51.5,50 z" fill="brown"></path>
            </g>
            <g data-v-585800ff="">
                <circle data-v-585800ff="" class="hub" cx="50" cy="50" r="3"></circle>
            </g>
        </svg></div>
</div>

```

This CSS successfully hides needle-2

```auto
.hide-needle-2 .o-needle-2 {
    visibility: hidden;
}

```

`hide-needle-2` is on the top line and `o-needle-2` is in the 9th line up from the bottom.  
However this does not hide it

```auto
.testgauge .hide-needle-2 .o-needle-2 {
    visibility: hidden;
}

```

`testgauge` appears on the 4th line from the top. What am I doing wrong please?

---

<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:** [28 August 2024 16:41 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/2 "2024-08-28T16:41:45Z")

</div>

Not enough code to actually show the problem. But why are you using multiple class names? You should only need

```auto
.hide-needle-2 {
    visibility: hidden;
}

```

Just make sure that the class isn't overridden by some CSS more specific. You can see that by looking at the element in the browser dev tools.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 August 2024 16:52 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/3 "2024-08-28T16:52:20Z")

</div>

Selectors can't be used as jump around and find any target. Order from outside in and remove unnecessary selectors. Less is more.

---

<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:** [28 August 2024 16:53 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/4 "2024-08-28T16:53:31Z")

</div>

That would hide the everything wouldn't it? I only want to hide the needle-2 element (which is the second needle in a classic gauge). testgauge is needed to identify which gauge is to have needle 2 hidden. So I want to hide needle 2 of the gauge with class testgauge.

---

<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:** [28 August 2024 17:16 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/5 "2024-08-28T17:16:30Z")

</div>

> [@Colin](#):
>
> That would hide the everything wouldn't it?

No, it will only hide the element to which the class is applied. I'm assuming that you have some method to change the applied class when you want to hide the needle (or that you default to hiding it and have something that removes the class when you want to see 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:** [28 August 2024 17:17 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/6 "2024-08-28T17:17:30Z")

</div>

> [@hotNipi](#):
>
> Selectors can't be used as jump around and find any target. Order from outside in and remove unnecessary selectors. Less is more.

I am not sure what I need to do. I need all three selectors, `testgauge` is the class the user defines in the node's config to select the individual gauge, `hide-needle-2` is a class added by passing in `msg.class`, and o-needle-2 selects the particular needle.

Oh, I have just twigged. I have the order wrong, It should be `.hide-needle-2 .testgauge .o-needle-2`.

Thanks, I think that is working, subject to more testing.

---

<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:** [28 August 2024 21:18 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/7 "2024-08-28T21:18:14Z")

</div>

> [@TotallyInformation](#):
>
> You should only need
> 
> ```auto
> .hide-needle-2 {
> visibility: hidden;
> }
> 
> ```

Just confirming that if I do this it does indeed hide the complete gauge, because that class is on the top level widget element that includes the complete gauge. When I pass in `msg.class` that is where it appears in the DOM.

---

<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:** [29 August 2024 00:28 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/8 "2024-08-29T00:28:48Z")

</div>

Well, that's easily fixed. 😉

Normally, you would only add/remove a class on the element you actually want to affect.

---

<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:** [29 August 2024 07:24 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/9 "2024-08-29T07:24:10Z")

</div>

How would a user of the dashboard widget dynamically set a class on just one needle therein?

---

<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:** [29 August 2024 07:48 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/10 "2024-08-29T07:48:40Z")

</div>

Well, you are using Vue aren't you? You can drive the classes using `:class="somevar"` where `somevar` is a Vue data variable that contains the list of classes.

Even if you can't use Vue's features, you can still use JavaScript to dynamically change the class list.

---

<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:** [29 August 2024 08:37 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/11 "2024-08-29T08:37:04Z")

</div>

> [@TotallyInformation](#):
>
> You can drive the classes using `:class="somevar"` where `somevar` is a Vue data variable that contains the list of classes.

As a developer of the widget I can, yes, but a user can only send in `msg.class` to change the class of the widget, which he can then use to apply css to individual elements of the widget in the way I am doing in the example here. The developer ensures that each component of the widget has a class, so in this case the second needle is `o-needle-2`, the user assigns a fixed class to the widget in the widget config, so he can direct css to a particular instance of the widget, in this example that is `testgauge`, then the user can dynamically add a class to the widget to do what he needs, in this case the class is `hide-needle-2` so he can hide that needle. Then he can send in an empty string in `msg.class` to show it again.

---

<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:** [29 August 2024 08:55 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/12 "2024-08-29T08:55:33Z")

</div>

But that is just the surface control. You can use any user-data in your widget indirectly if you want to and so can turn on/off the extra pointer based on either a switch in the Editor panel for your node or based on a msg input - `msg.pointer2 = true`?

So while the user may add/remove classes to the widget itself, you still have full control over what happens within the detail of the widget. It is a little more work for you to set up but once done is very easy for users.

---

<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:** [29 August 2024 12:33 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/13 "2024-08-29T12:33:32Z")

</div>

> [@TotallyInformation](#):
>
> can turn on/off the extra pointer based on either a switch in the Editor panel for your node or based on a msg input - `msg.pointer2 = true`

Yes, I could add methods for hiding/showing individual needles, changing the colour, changing the rotation speed of the needle, changing the font size and colour of each of the three text fields and the same for the scale annotation, and a plethora of other stuff, but it adds bloat and complexity for minimal gain as very few want to do these things. Both D1 and D2 use the concept of allowing the use of CSS to tweak such things in the unusual event of it being required.

---

<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:** [27 November 2024 12:34 UTC](https://discourse.nodered.org/t/some-css-help-needed-please/90510/14 "2024-11-27T12:34:26Z")

</div>

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