# Ui\_template - widget styling

**URL:** https://discourse.nodered.org/t/ui-template-widget-styling/33989
**Category:** Dashboard
**Created:** [9 October 2020 11:27 UTC](https://discourse.nodered.org/t/ui-template-widget-styling/33989 "2020-10-09T11:27:37Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)
#### Post date: [9 October 2020 11:27 UTC](https://discourse.nodered.org/t/ui-template-widget-styling/33989/1 "2020-10-09T11:27:37Z")

</div>

I have adapted a pure css button based on the checkbox element.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b72b3e98714cab40af317f3289b45ffb750bcc2c.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58f010c4cc5f60a1a58eb40c3a5108ae6761a5a4.png)  
The associated html exposes the on and off background-color as well as the on and off content.

```auto
[{"id":"bef9867d.b18028","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r8g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" unchecked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":100,"wires":[[]]},{"id":"fdb1290a.963198","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"CSS only ","order":2,"width":0,"height":0,"format":"/!--\n\n-->\n<style>\n :root {\n --dashboard-unit-width: 48px;\n --dashboard-unit-height: 48px;\n --dashboard-min-height: 34px;\n --dashboard-min-width: 36px;\n --remote-button-background: black;\n --remote-button-foreground: #cccccc;\n }\n .nr-dashboard-template {\n padding: 0px;\n }\n\n /* This is the normal button definition */\n .remote-button{\n background-color: var(--remote-button-background) !important;\n color: var(--remote-button-foreground);\n height: var(--dashboard-unit-height);\n width: 100%;\n border-radius: 10px;\n font-size:1.0em;\n font-weight:normal;\n margin: 0;\n min-height: 36px;\n min-width: unset;\n line-height: unset;\n }\n /* This is a sub-set which is invoked by */\n /* <md-button class=\"md-button remote-button bigger\"> */\n /* note the (space) \"bigger\" at the end. */\n .remote-button.bigger{\n font-weight:bold;\n font-size:1.5em;\n }\n /* This is for buttons with a lot of text. `font-size:0.7em` */\n /* makes the font 70% normal size */\n .remote-button.small{\n font-size:0.7em;\n }\n /* This is for buttons with just icons, to upsize the size */\n /* of the icon with the line: */\n /* <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node */\n .remote-icon{\n font-size:2.0em;\n }\n /* This is the same as the other one, but it makes the icon smaller */\n .remote-iconS{\n font-size:0.5em;\n }\n\n .remote-button.disabled {\n pointer-events: none;\n opacity: 0.3;\n }\n/* New ck-button */ \n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 100%;\n}\n\n.ck-button label span {\n text-align: center;\n/* padding: 3px 0px; */\n padding: 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n/*\nCSS\n---\n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 4em;\n}\n\n.ck-button label span {\n text-align: center;\n padding: 3px 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n\n<md-button class=\"md-button remote-button3x bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" value=\"1\">\n <span style=\"background-color:#00cc00\" class=\"on\">red<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">red<br>off</span>\n </label>\n </div>\n</md-button>\n</div>\n*/\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":100,"y":60,"wires":[[]]},{"id":"1237f7a0.5cace8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">9:0</span>\n <span style=\"background-color:#006600\" class=\"off\">9:1</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":100,"wires":[[]]},{"id":"bb33fa8e.a48f68","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"r8g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":140,"wires":[[]]},{"id":"b856ea19.2280f8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\">\n <span style=\"background-color:#00cc00\" class=\"on\">9:0</span>\n <span style=\"background-color:#006600\" class=\"off\">9:1</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":140,"wires":[[]]},{"id":"c3500612.c24038","type":"ui_group","z":"","name":"Btn2","tab":"94f74e9f.6a717","order":1,"disp":true,"width":"4","collapse":false},{"id":"94f74e9f.6a717","type":"ui_tab","z":"503e64bc.acab6c","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

Is it possible to style the below css in order to fill the dashboard button area ?  
I have been struggling with this for days now. Any suggestions will be most welcome.

Html

```auto
<!--
    V1
    ==
//-->
<div>
<md-button class="md-button remote-button bigger" 
    data-payload="1" 
    data-buttontype="radio"
    data-radiogroup='group1'
    data-topic="8"
    >
    <div class="ck-button">
       <label class="ck-switch">
          <input type="checkbox" unchecked>
            <span style="background-color:#00cc00" class="on">btn<br>on</span>
            <span style="background-color:#006600" class="off">btn<br>off</span>
        </label>
    </div>
</md-button>
</div>

```

CSS

```auto
/!--

-->
<style>
    :root {
      --dashboard-unit-width: 48px;
      --dashboard-unit-height: 48px;
      --dashboard-min-height: 34px;
      --dashboard-min-width: 36px;
      --remote-button-background: black;
      --remote-button-foreground: #cccccc;
    }
    .nr-dashboard-template {
        padding: 0px;
    }

    /* This is the normal button definition */
    .remote-button{
        background-color: var(--remote-button-background) !important;
        color: var(--remote-button-foreground);
        height: var(--dashboard-unit-height);
        width: 100%;
        border-radius: 10px;
        font-size:1.0em;
        font-weight:normal;
        margin: 0;
        min-height: 36px;
        min-width: unset;
        line-height: unset;
    }
    /* This is a sub-set which is invoked by */
    /* <md-button class="md-button remote-button bigger"> */
    /* note the (space) "bigger" at the end. */
    .remote-button.bigger{
        font-weight:bold;
        font-size:1.5em;
    }
    /* This is for buttons with a lot of text. `font-size:0.7em` */
    /* makes the font 70% normal size */
    .remote-button.small{
        font-size:0.7em;
    }
    /* This is for buttons with just icons, to upsize the size */
    /* of the icon with the line: */
    /* <i class="fa fa-fw fa-plus remote-icon"> in the other node */
    .remote-icon{
        font-size:2.0em;
    }
    /* This is the same as the other one, but it makes the icon smaller */
    .remote-iconS{
        font-size:0.5em;
    }

    .remote-button.disabled {
        pointer-events: none;
        opacity: 0.3;
    }
/* New ck-button */    
.ck-switch {
  position: relative;
  display: inline-block;
}

.ck-switch input { display: none; }

.off {
  position: absolute;
  top: 0px;
  width: 100%;
  opacity: 1;
  background-color: #911;
  color: white;
}
.on {
  color: white;
}
.ck-button input:checked + .on {
  opacity: 1;
  background-color: #911;
  color: white;
}
.ck-button input:checked + span + .off {
  opacity: 0;
  background-color: #911;
}

.ck-button {
/* ok margin: 4px;*/
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}

.ck-button:hover {
/* ok margin: 4px;*/
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid red;
  overflow: auto;
  float: left;
  color: red;
}

.ck-button label {
  float: left;
  width: 100%;
}

.ck-button label span {
  text-align: center;
/* padding: 3px 0px; */
  padding: 0px;
  display: block;
}

.ck-button label input {
  position: absolute;
  top: -20px;
}
/*
CSS
---
.ck-switch {
  position: relative;
  display: inline-block;
}

.ck-switch input { display: none; }

.off {
  position: absolute;
  top: 0px;
  width: 100%;
  opacity: 1;
  background-color: #911;
  color: white;
}
.on {
  color: white;
}
.ck-button input:checked + .on {
  opacity: 1;
  background-color: #911;
  color: white;
}
.ck-button input:checked + span + .off {
  opacity: 0;
  background-color: #911;
}

.ck-button {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}

.ck-button:hover {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid red;
  overflow: auto;
  float: left;
  color: red;
}

.ck-button label {
  float: left;
  width: 4em;
}

.ck-button label span {
  text-align: center;
  padding: 3px 0px;
  display: block;
}

.ck-button label input {
  position: absolute;
  top: -20px;
}

<md-button class="md-button remote-button3x bigger" 
    data-payload="1" 
    data-buttontype="radio"
    data-radiogroup='group1'
    data-topic="8"
    >
    <div class="ck-button">
       <label class="ck-switch">
          <input type="checkbox" value="1">
            <span style="background-color:#00cc00" class="on">red<br>on</span>
            <span style="background-color:#006600" class="off">red<br>off</span>
        </label>
    </div>
</md-button>
</div>
*/

</style>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6f61313d7d6cb17440c7998e21796adc0c030de.png)  
Some progress - sorry if this creates a moving target.

To fix:

1. Width is not 100%.

2. Text is not centered vertically.

3. Vertical button height of more than 1 unit would be more useful.

```auto
[{"id":"bef9867d.b18028","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r8g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button small\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" unchecked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":100,"wires":[[]]},{"id":"fdb1290a.963198","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"CSS only ","order":2,"width":0,"height":0,"format":"/!--\n\n-->\n<style>\n :root {\n --dashboard-unit-width: 48px;\n --dashboard-unit-height: 48px;\n --dashboard-min-height: 36px;\n --dashboard-min-width: 36px;\n --remote-button-background: black;\n --remote-button-foreground: #cccccc;\n }\n .nr-dashboard-template {\n padding: 0px;\n }\n\n /* This is the normal button definition */\n .remote-button{\n background-color: var(--remote-button-background) !important;\n color: var(--remote-button-foreground);\n height: var(--dashboard-unit-height);\n width: 100%;\n border-radius: 10px;\n font-size:1.0em;\n font-weight:normal;\n margin: 0;\n min-height: var(--dashboard-min-height);\n min-width: unset;\n line-height: unset;\n }\n .remote-button:hover {\n /* apply hover effect here */\n border-radius:10px;\n border:1px solid red;\n overflow:auto;\n float:left;\n }\n /* This is a sub-set which is invoked by */\n /* <md-button class=\"md-button remote-button bigger\"> */\n /* note the (space) \"bigger\" at the end. */\n .remote-button.bigger{\n font-weight:bold;\n font-size:1.5em;\n }\n /* This is for buttons with a lot of text. `font-size:0.7em` */\n /* makes the font 70% normal size */\n .remote-button.small{\n font-size:0.7em;\n }\n /* This is for buttons with just icons, to upsize the size */\n /* of the icon with the line: */\n /* <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node */\n .remote-icon{\n font-size:2.0em;\n }\n /* This is the same as the other one, but it makes the icon smaller */\n .remote-iconS{\n font-size:0.5em;\n }\n\n .remote-button.disabled {\n pointer-events: none;\n opacity: 0.3;\n }\n/* New ck-button */ \n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n width: 100%;\n margin: -4px;\n padding: -4px;\n/* ok margin: 4px;*/\nheight: var(--dashboard-unit-height);\n min-height: var(--dashboard-min-height);\n min-width: unset;\n line-height: unset;\n background-color: #EFEFEF;\n border-radius: 10px;\n/* border: 1px solid #D0D0D0;*/\n overflow: hidden;\n float: left;\n}\n\n.ck-button:hover {\n/* margin: 0;*/\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n border-radius: 10px;\n/* border: 1px solid red;*/\n overflow: hidden;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 100%;\n}\n\n.ck-button label span {\n height: var(--dashboard-unit-height);\n min-height: var(--dashboard-min-height);\n min-width: unset;\n line-height: unset;\n\n text-align: center;\n/* padding: 3px 0px; */\n margin: -4px;\n padding: 4px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n/*\nCSS\n---\n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 4em;\n}\n\n.ck-button label span {\n text-align: center;\n padding: 3px 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n\n<md-button class=\"md-button remote-button3x bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" value=\"1\">\n <span style=\"background-color:#00cc00\" class=\"on\">red<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">red<br>off</span>\n </label>\n </div>\n</md-button>\n</div>\n*/\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":100,"y":60,"wires":[[]]},{"id":"1237f7a0.5cace8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">9:1</span>\n <span style=\"background-color:#006600\" class=\"off\">9:0</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":100,"wires":[[]]},{"id":"bb33fa8e.a48f68","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"r10g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"10\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":140,"wires":[[]]},{"id":"b856ea19.2280f8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r11g1","order":3,"width":"2","height":"2","format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button remote-button bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"11\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\">\n <span style=\"background-color:#00cc00\" class=\"on\">11:1</span>\n <span style=\"background-color:#006600\" class=\"off\">11:0</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":140,"wires":[[]]},{"id":"c3500612.c24038","type":"ui_group","z":"","name":"Btn2","tab":"94f74e9f.6a717","order":1,"disp":true,"width":"4","collapse":false},{"id":"94f74e9f.6a717","type":"ui_tab","z":"503e64bc.acab6c","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)
#### Post date: [10 October 2020 13:38 UTC](https://discourse.nodered.org/t/ui-template-widget-styling/33989/2 "2020-10-10T13:38:02Z")

</div>

Fixed part of this:

```auto
[{"id":"bef9867d.b18028","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r8g1","order":3,"width":"1","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button ck-button ck-switch on off small\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" unchecked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":100,"wires":[[]]},{"id":"fdb1290a.963198","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"CSS only ","order":2,"width":0,"height":0,"format":"/!--\n\n-->\n<style>\n .nr-dashboard-template {\n padding: 0px;\n }\n/* New ck-button */ \n.ck-switch {\n height: 100%;\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input {\n display: none;\n}\n\n.off {\n margin: -6px;\n padding: 6px;\n position: absolute;\n top: 0px;\n height: 100%;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n height: 100%;\n margin: -6px;\n padding: 6px;\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n width: 100%;\n height: 100%;\n margin: -6px;\n padding: 6px;\n\n/* ok margin: 4px;*/\n/*new height: var(--dashboard-unit-height); */\n/*new min-height: var(--dashboard-min-height);*/\n min-height: unset;\n min-width: unset;\n line-height: unset;\n background-color: #EFEFEF;\n/*OK border-radius: 10px;*/\n/* border: 1px solid #D0D0D0;*/\n overflow: hidden;\n float: left;\n}\n\n.ck-button:hover {\n/* margin: 0;*/\n/* ok margin: 4px;*/\n background-color: #EFEFEF;\n/*OK border-radius: 10px;*/\n/* border: 1px solid red;*/\n overflow: hidden;\n float: left;\n color: red;\n}\n\n.ck-button label {\n height: 100%;\ntext-align: center;\n float: left;\n width: 100%;\n}\n\n.ck-button label span {\n margin: -6px;\n padding: 6px;\n/*New height: var(--dashboard-unit-height);*/\n/*New min-height: var(--dashboard-min-height);*/\n min-height: unset;\n min-width: unset;\n line-height: unset;\n\n text-align: center;\n/* padding: 3px 0px; */\n/*\n margin: -4px;\n padding: 4px;\n */\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n/*\nCSS\n---\n.ck-switch {\n position: relative;\n display: inline-block;\n}\n\n.ck-switch input { display: none; }\n\n.off {\n position: absolute;\n top: 0px;\n width: 100%;\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.on {\n color: white;\n}\n.ck-button input:checked + .on {\n opacity: 1;\n background-color: #911;\n color: white;\n}\n.ck-button input:checked + span + .off {\n opacity: 0;\n background-color: #911;\n}\n\n\n.ck-button {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid #D0D0D0;\n overflow: auto;\n float: left;\n}\n\n.ck-button:hover {\n margin: 4px;\n background-color: #EFEFEF;\n border-radius: 4px;\n border: 1px solid red;\n overflow: auto;\n float: left;\n color: red;\n}\n\n.ck-button label {\n float: left;\n width: 4em;\n}\n\n.ck-button label span {\n text-align: center;\n padding: 3px 0px;\n display: block;\n}\n\n.ck-button label input {\n position: absolute;\n top: -20px;\n}\n\n<md-button class=\"md-button remote-buttonOld3x bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"8\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" value=\"1\">\n <span style=\"background-color:#00cc00\" class=\"on\">red<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">red<br>off</span>\n </label>\n </div>\n</md-button>\n</div>\n*/\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":100,"y":60,"wires":[[]]},{"id":"1237f7a0.5cace8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r9g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button ck-button ck-switch on off\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"9\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">9:1<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">9:0<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":100,"wires":[[]]},{"id":"bb33fa8e.a48f68","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":"r10g1","order":3,"width":"2","height":1,"format":"<!--\n V1\n ==\n//-->\n<div>\n<md-button class=\"md-button ck-button ck-switch on off bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"10\"\n >\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\" checked>\n <span style=\"background-color:#00cc00\" class=\"on\">btn<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">btn<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":90,"y":140,"wires":[[]]},{"id":"b856ea19.2280f8","type":"ui_template","z":"503e64bc.acab6c","group":"c3500612.c24038","name":":r11g1","order":3,"width":"2","height":"2","format":"<!--\n V1\n ==\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\">\n <span style=\"background-color:#00cc00\" class=\"on\">11:1</span>\n <span style=\"background-color:#006600\" class=\"off\">11:0</span>\n </label>\n </div>\n \n//-->\n<div>\n<md-button class=\"md-button ck-button ck-switch on off bigger\" \n data-payload=\"1\" \n data-buttontype=\"radio\"\n data-radiogroup='group1'\n data-topic=\"11\"\n >\n\n <div class=\"ck-button\">\n <label class=\"ck-switch\">\n <input type=\"checkbox\">\n <span style=\"background-color:#00cc00\" class=\"on\">11:1<br>on</span>\n <span style=\"background-color:#006600\" class=\"off\">11:0<br>off</span>\n </label>\n </div>\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":230,"y":140,"wires":[[]]},{"id":"eacf7593.fa2ca8","type":"ui_button","z":"503e64bc.acab6c","name":"","group":"c3500612.c24038","order":6,"width":"2","height":"2","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":110,"y":180,"wires":[[]]},{"id":"c3500612.c24038","type":"ui_group","z":"","name":"Btn2","tab":"94f74e9f.6a717","order":1,"disp":true,"width":"4","collapse":false},{"id":"94f74e9f.6a717","type":"ui_tab","z":"503e64bc.acab6c","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

[https://discourse.nodered.org/t/css-ui-template-new-ck-button-widget-text-is-not-centered-vertacally/34044/4](https://discourse.nodered.org/t/css-ui-template-new-ck-button-widget-text-is-not-centered-vertacally/34044/4)

---

<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: [24 October 2020 13:38 UTC](https://discourse.nodered.org/t/ui-template-widget-styling/33989/3 "2020-10-24T13:38:17Z")

</div>

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