HTML in (gauge) label

Dashboard
1

I want to center the label text for a gauge label because I have a line break in the label text, and centered the label looks much better than aligned left. So I tried something like <div style='text-align: center'>{{msg.mylabeltext}}</div>. Unfortunately this does not work, only the

and the label text show up in the dasboard, the style part is missing. Why is that? Things like <font color="red">{{msg.payload}}</font> do work though. Is there a rule what works and what not?

As a workaround I tried to use a template node and create a specific class for that. But that is not an ideal solution either as I use more than one gauge on the page and I want only this gauge to have this centered two line label.

2

Using classes is way better than any other solution. :slight_smile:
Replace the id with the real id of the md-card that contains the gauge.

  [node-id="aa10b14b6e530709"] > p {
    width:100px !important;
    text-align:center !important;
    display:flex !important;
    margin: 6px 0px 10px 0px !important;
  }
3

What is the significance of this part? I have seen it listed differently for a button hover use case

4

The > means elements inside

The p means find <p> (paragraph) tags

So essentially, the whole CSS selector states find the element with that node ID then looks inside it for any paragraph tags.

https://www.w3schools.com/cssref/sel_element_gt.asp

1 Like
5

Thanks... Googling > p just didn't do the job as it somehow linked to the singer P!NK :stuck_out_tongue:

1 Like
6

Thanks for your answer. I'm pretty busy at work, so I can only reply now. Isn't the node ID volatile? Is there a way to give the p-tag inside the md-card it's own id?

7

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