How to style UI template elements (buttons, text inputs)

Dashboard
1

This is made with dashboard buttons and text input nodes:

image
image1054Ă—142 5.61 KB

It respects the chosen theme.

How can I get this styling for elements in the Template UI node?

For example, the following code produces this:

<md-button style="width: 100px; height:40px;" ng-click="send({action: 'new_scene', zone: msg.zoneid})">Save</md-button>
<input type="text" ng-model="scenename" name="string" ng-change="send({action: 'update_scenename', name: scenename})" />

image
image1732Ă—150 1.53 KB

  • Display inline: I can't make it work with CSS and additional HTML such as wrapping the button and input in <span> or <div>
  • I have tried to mimic the HTML generated by Node-RED by wrapping in elements like <md-card> and <md-input-container> but I get strange results

Any ideas?

2

Hi @hazymat, Here's an example ui-template that I figured out to fix the button issue. As an example I'm using a button to start fullscreen on the browser.

<style>
    #go-fullscreen-btn {
        height: 100%;
        border-style: unset;
    }
    .btn-parent {
        padding: 0 !important;
    }
</style>
<md-button id="go-fullscreen-btn" ng-click="send({payload:action('go fullscreen')})" type="button">Go Fullscreen
</md-button>
<script>
    fsElem = document.documentElement;
    theParentElem = document.getElementById("go-fullscreen-btn").parentNode
    theParentElem.classList.add('btn-parent')
    
    this.scope.action = function(params) {
    console.log("params received is: ",params)
    if (fsElem.requestFullscreen) {
        fsElem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
        fsElem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        fsElem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
        fsElem.msRequestFullscreen();
        }
    // In fullscreen. Now hide the button.
    document.getElementById("go-fullscreen-btn").classList.add('ng-hide');
    return {payload:"Fullscreen is active."}
    }
</script>
3

Thanks for your post. In the end I got it working and I think it was the introduction of !important that resolved my issue.

Side note: I may use that "fullscreen" idea, for a wall controller I have installed. I really like it!

I'll post my CSS here as well, although I suspect it will be easier for most people to figure this out themselves, than to go through and weed-out what they need from all the CSS here:

<style>
    input {
        width:150px;
        margin:0 22px 0 0;
        display:inline;
        border-color: #eeeeee;
        color: #eeeeee;
        border-bottom-width: 1px;
        font-family: inherit;
        background: none;
        padding: 2px 2px 1px;
        border-width: 0 0 1px;
        line-height: 26px;
        height: 40px;
        -ms-flex-preferred-size: 26px;
        border-radius: 0;
        border-style: solid;
        box-sizing: border-box;
        float: left;
    }
    .scenemanageselect {
        width:40%;
        margin: 0 20px 0 0;
    }

    md-select span {
        color:#eee;
    }
    md-select .md-select-value.md-select-placeholder  {
        border-bottom-color: #eee;
    }
    .md-select-value .md-select-icon:after {
        border-bottom-color: #eee;
        color:#eee;
    }
    md-select.md-default-theme .md-select-value, md-select .md-select-value {
        border-bottom-color: #eee;
    }
    md-select.md-default-theme:not([disabled]):focus .md-select-value, md-select:not([disabled]):focus .md-select-value {
        border-bottom-color: #0eb8c0;
        border-bottom-width: 1px;
    }
    .md-button {
        height:38px;
    }
    .md-container {

    }
    .deletebutton {
        display:inline !important;padding:10px;height:38px !important;
        width:120px;
        margin:0 20px 0 0 !important;
        background-color:rgb(153, 71, 0, 0.65) !important;
    }
    .updatebutton {
        display:inline !important;padding:10px;height:38px !important;
        width:120px;
        margin:0 20px 0 0 !important;
        background-color:rgb(153, 144, 0) !important;
    }
    .control-row {
        display:inline-flex; margin: 10px 0 10px 0
    }

</style>

<!--New Scene-->
<div class="control-row">
    <input type="text" placeholder="Scene ID" ng-model="msg.sceneid" name="string" ng-change="send({action: 'update_sceneid', sceneid: msg.sceneid})"  />
    <input type="text" placeholder="Scene Name" ng-model="msg.scenefriendly" name="string" ng-change="send({action: 'update_scenefriendly', scenefriendly: msg.scenefriendly})" />
    <md-button style="width: 100px; height:40px; display:inline" ng-click="send({action: 'new_scene', zone: msg.zoneid})">Save</md-button>
</div>


<div ng-if="msg.notify === true">{{msg.notification}}</div>


<!--Delete / Update Scene-->
<div class="control-row">
    <md-select ng-model="msg.someModel" placeholder="Select a scene" class="scenemanageselect"><md-option ng-value="key" ng-repeat="(key, value) in msg.scenes" ng-click="send({action: 'select_to_delete', name: key})">{{value.friendly_name}} - (ID = {{key}})</md-option></md-select>
    <md-button ng-click="send({action: 'updatescene', zone: msg.zoneid})" class="updatebutton" >Update</md-button>
    <md-button ng-click="send({action: 'deletescene', zone: msg.zoneid})" class="deletebutton" >Delete</md-button>
</div>