Hiding parts of the gauge node

[jbudd]

Starting with this gauge

I can use CSS

.nrdb-ui-gauge.noarc svg g#arc {
display: none;
}

to get rid of the thick green arc

But if I also have

.nrdb-ui-gauge.noarc svg g#backdrop{
display: none;
}

After sending a new payload ,I lose the value, label and units, despite these elements not even being part of the svg.

It seems that .nrdb-ui-gauge-value acquires visbility: hidden;

What am I doing wrong?

[Steve-Mcl]

Was that picture of html taken before or after the div disappeared? I note the div has 0 height and width - may be related...

@jbudd

.nrdb-ui-gauge.noarc svg g#backdrop{
display: none;
}

This will remove the element from the dom and not knowing how the labels div position and size is calculated, it may be related. To rule it out, try using visbility: hidden; for that instead.

If that doesn't work, share a small repro flow.

[jbudd]

That screen capture was after applying display:none to the backdrop (and the contents disappeared).

You are right that for some reason if the backdrop is not displayed, the div nrdb-ui-gauge-value gets height & width 0 as well as visibility: hidden.

Div nrdb-ui-gauge-value normally:

And with display: none on the backdrop:

[Steve-Mcl]

@Steve-Mcl

To rule it out, try using visbility: hidden; for that instead

Did you try adjusting your custom style rule to use visibility:hidden instead of display:none?

[jbudd]

Visibility: hidden gives the desired result

It's not pretty but it does the job

So I suppose that's problem solved, thanks.

I still wonder why display: none does not work.

[rakgupta]

@jbudd

It's not pretty but it does the job

I'm trying to do something similar, but I want to hide the min/max (my gauge is 2X2 and the min/max overlap with the value). I've tried to find where I could do that, but I can't find the css attribute - would you know?

[gerrybartley]

This should do it

.nrdb-ui-gauge #limits {
        display: none;
    }

[rakgupta]

@gerrybartley

This should do it

It did! Thanks so much..

[rakgupta]

@jbudd

Visibility: hidden gives the desired result

I just found another way to do this.. by setting the gauge size to 0px, it removes the inner "arc"

NOTE: I am also hiding the needle and the min/max in this gauge via css overrides, but if you only want to hide the "arc" without css, the 0px will also work.

[jbudd]

That's a useful trick, thanks.

It does seem like if anyone ever addresses the many shortcomings of the gauge they might consider it a bug and fix it.

I played with other values for this config item. It seems to modify the diameter of the coloured segments and the length of the needle.