UI CSS font size template node problem

Dear forum,

I can adjust the text node font size with a template node to display bigger numbers.
image
image
image

Same for the text node that displays words
image
image

But I can't get the "100" get in a bigger font

So far I've used p.label and .value
How can I reference to the text input to adjust its size without using CSS class

Just the same style as I used in the examples.

Could anyone help me what I have to put in place instead of .value or p.label?

Try with this

<style>
    nr-dashboard-theme .nr-dashboard-textinput input {
        font-size: 2em;
    }
</style>
1 Like

Thank you for your reply, how can i assign this to node ID?

Didn't work :frowning:

Show that part of flow, how you try to use it.

[{"id":"b6452a0321436842","type":"ui_template","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","name":"Text Font Format","order":11,"width":7,"height":1,"format":"<style>\n\n\n[node-id=\"cef7244c73caf7b0\"] .value \n\n{\n    font-size: 30px;\n  }\n \n \n \n  [node-id=\"cef7244c73caf7b0\"] p.label\n \n{\nfont-size: 25px;\n  }\n \n \n \n \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":210,"y":1340,"wires":[[]]},{"id":"92e43fb0bca4b1c5","type":"ui_slider","z":"1f851c1.28701e4","name":"","label":"slider","tooltip":"","group":"34c8e5f1.3881fa","order":6,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"className":"","x":410,"y":1500,"wires":[[]]},{"id":"bceab34cbcb678ee","type":"ui_numeric","z":"1f851c1.28701e4","name":"","label":"numeric","tooltip":"","group":"34c8e5f1.3881fa","order":7,"width":0,"height":0,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"className":"","x":420,"y":1540,"wires":[[]]},{"id":"e26a0f0a672e780c","type":"ui_text_input","z":"1f851c1.28701e4","name":"","label":"","tooltip":"","group":"34c8e5f1.3881fa","order":5,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":400,"y":1460,"wires":[[]]},{"id":"cef7244c73caf7b0","type":"ui_text","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","order":4,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":370,"y":1420,"wires":[]},{"id":"11e8c3d71abf6192","type":"inject","z":"1f851c1.28701e4","name":"bigger font","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"test","payloadType":"str","x":210,"y":1440,"wires":[["cef7244c73caf7b0","e26a0f0a672e780c"]]},{"id":"51cbb1bb8b58e51b","type":"inject","z":"1f851c1.28701e4","name":"bigger font","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"123","payloadType":"num","x":230,"y":1500,"wires":[["92e43fb0bca4b1c5","bceab34cbcb678ee"]]},{"id":"0686d2bd47df4205","type":"ui_template","z":"1f851c1.28701e4","group":"34c8e5f1.3881fa","name":"Text Font Size text input","order":36,"width":9,"height":1,"format":"<style>\n    nr-dashboard-theme .nr-dashboard-textinput input {\n        font-size: 30px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":230,"y":1280,"wires":[[]]},{"id":"34c8e5f1.3881fa","type":"ui_group","name":"test","tab":"43b06d842d4a7b64","order":1,"disp":true,"width":"15","collapse":false,"className":""},{"id":"43b06d842d4a7b64","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

Oh , my copy/paste issue .
The first dot were missing.

<style>
    .nr-dashboard-theme .nr-dashboard-textinput input {
        font-size: 2em;
    }
</style>

hmmmm...This also did nothing!
How can i assign this to node ID (not all text input nodes needs to be bigger :smiley: )

Then maybe this will be simplest

[node-id="e26a0f0a672e780c"] * input {
    font-size: 2em;
}

It works!

image

Is there a way to stop the non-capital letter "y" (next to the capital letter Y) to look like a letter v? :rofl:

Probably can be done some other ways too but what I found is

[node-id="e26a0f0a672e780c"] * input {
    font-size: 2em;
    height:unset;
}

It may produce some other side effects ....

It worked!

image
any idea how this value part is reached?

The label part was accessed with [node-id=" "] p.label,
But the value part stayed the same :frowning:

add a class to the node called size_25 and then this selector/rule to the ui-template

.size_25 div p {
    font-size: 2em;
}

Or you can style the label and value seperately:

    .nr-dashboard-text.size_25  p.label{
        font-size: 0.8em;
        font-family: "courier new", sans-serif;
        color: #ff8c00;
    }
    .nr-dashboard-text.size_25 p.value{
        font-size: 1.8em;
        font-family: "Times New Roman", serif;
        color: #00008B
    }
1 Like

@zenofmud @hotNipi @jbudd

Thank you all so much! I learned something new about CSS classes and I was able to implement it. My project is making huge progress thanks!

1 Like

One more question @hotNipi @jbudd @zenofmud

How does one resize data (words and numbers) in UI table?

Rows are added dynamicly and I would like to have the entire table including added rows 30px

I am stuck after trying some ideas like .tabulator textSize and other inputs in the CSS node… some examples on the forum are also not what i needed (somehow some didn’t work too)

I would be forever grateful!

This is kind of confusing explanation but font size and row height can be somehow adjusted like this

.tabulator-row {
    min-height: 26px;
    font-size:24px;
}
1 Like

Thank you! Will try asap!

What i meant was that all the input in the table needs to be 30px :smile:

This worked!

Is the rule font size < min-height?
If so, that would make a lot of sense

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