Some CSS help needed please

General
1

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

<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

.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

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

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

2

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

.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.

3

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

4

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.

5

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).

6

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.

1 Like
7

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.

8

Well, that's easily fixed. :wink:

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

9

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

10

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.

11

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.

12

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.

13

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.

14

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