UI template buttons inheriting node red css

Dashboard
1

Hi,

is it possible to have a button defined in a ui_template node inheriting the default node red css?
In this way a change in the default theme style is automatically and properly updated in the ui_template elements...

Picture2
Picture2.png1561Ă—446 117 KB

PS: my template UI has the following code:

[{"id":"7de5293d.2e88d8","type":"ui_template","z":"38d689bb.d0e076","group":"f33a9d12.83f36","name":"CommonList","order":1,"width":"0","height":"0","format":"<style>\n    .warned { color: orange }\n    .inited { ng-init : \"\"}\n</style>\n\n<div>\n<table style=\"text-align: left; width: 100%;\"\nborder=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr>\n    <td style=\"vertical-align: bottom;\">\n        <form name=\"form_odl\">\n        <label ng-class =\"{'warned': form_odl.$valid === false}\" >ODL</label>\n        <input  style=\"width:95%;\"\n        ng-model=\"model_odl\"  id=\"lab_odl\"      name=\"input_odl\"\n        ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n        ng-pattern = \"/^ODL-[0-9]{8}$/\"><br>\n        </form>\n    </td>\n    <td style=\"vertical-align: bottom;\">\n        <button ng-click=\"out.payload = {val : model_odl, field : 'ODL', valid : form_odl.$valid}; send(out)\" style=\"width: 100px\">Carica ODL</button>\n    </td>\n</tr>\n<tr>\n    <td style=\"vertical-align: bottom;\">\n        <form name=\"form_pn\">\n        <label ng-class =\"{'warned': form_pn.$valid === false}\" >Part num./ ricetta</label>\n        <input  style=\"width:95%;\" ng-class =\"{'inited':msg.update_fields === true}\"\n        ng-model=\"model_pn\"  id=\"lab_pn\"      name=\"input_pn\"\n        ng-required= true   ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n        ng-pattern = \"/^[0-9]{11}[0-9A-Z]{2}$/\"\n        ng-disabled = false><br>\n        </form>\n    </td>\n    <td style=\"vertical-align: bottom;\">\n        <button ng-click=\"out.payload = {val : model_pn, field : 'Cod.Cooltech', valid : form_pn.$valid}; send(out)\" style=\"width: 100px\">Carica PN</button>\n    </td>\n</tr>\n</tbody>\n</table>\n\n</div>\n<br>\n<div>\n<hr style= \"border: 1px solid white;\">\n</div>\n\n\n\n<script>\n        (function(scope) {\n        // watch for msg in order to get every new message\n        scope.$watch('msg', function(data) {\n        if (typeof data.update_odl !== 'undefined')\n            scope.model_odl = data.update_odl;\n        if (typeof data.update_pn !== 'undefined')\n            scope.model_pn = data.update_pn;            \n        });\n    })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":110,"y":580,"wires":[["f11dc9c8.23b4b8","18f6b2c2.fb3ded"]]},{"id":"f33a9d12.83f36","type":"ui_group","z":"","name":"Dati test","tab":"c3bde9c2.3f2de8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c3bde9c2.3f2de8","type":"ui_tab","z":"","name":"Home","icon":"fa-home fa-lg","order":1,"disabled":false,"hidden":false}]
2 Likes
2

By default they will be as long as you set
image
in the Dashboard - Site settings tab

1 Like
3

I already had "node red theme everywhere" setting selected but the buttons remain grey... :thinking:

4

If you have experimenting with themes and find some things messing up after that, it sometimes helps if you clear browser cache.

5

Hi - I am facing the same problem and I am looking to help restyle the buttons. Can anybody give a definitive answer if this is possible or not please?

image
image613Ă—720 42.5 KB

My code as follows:

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <p id="status"></p>
    <p id="loaded_n_total"></p>
</form>

<script>
    function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "/fileupload");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>
1 Like
6

I figured out a work-around for the button problem here: How to style UI template elements (buttons, text inputs)