Ui_template - widget styling

I have adapted a pure css button based on the checkbox element.
image image
The associated html exposes the on and off background-color as well as the on and off content.

[{"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

<!--
    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

/!--

-->
<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
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.

[{"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}]

Fixed part of this:

[{"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

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