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

**URL:** https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261
**Category:** Dashboard
**Created:** [25 February 2020 23:06 UTC](https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261 "2020-02-25T23:06:46Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [25 February 2020 23:06 UTC](https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261/1 "2020-02-25T23:06:47Z")

</div>

This is made with dashboard buttons and text input nodes:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a89e55d2bfd3a68071bc55f87c00118dd54cc42d.png)  
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:

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa1236bc6bfa497109640bade675f36078d3a42d.png)

- **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?

---

<div class="post-metadata">

### Author: ![Digital-Thor](https://avatars.discourse-cdn.com/v4/letter/d/a4c791/32.png) [@Digital-Thor](https://discourse.nodered.org/u/Digital-Thor)
#### Post date: [15 March 2020 21:58 UTC](https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261/2 "2020-03-15T21:58:36Z")

</div>

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.

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)
#### Post date: [15 March 2020 22:39 UTC](https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261/3 "2020-03-15T22:39:19Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 April 2020 22:46 UTC](https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261/4 "2020-04-14T22:46:17Z")

</div>

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