# Tabs, groups and help with CSS structure

**URL:** <https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178>\
**Category:** Dashboard\
**Created:** [20 April 2020 08:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178 "2020-04-20T08:39:11Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 13:09 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/41 "2020-04-21T13:09:42Z")

</div>

> [@hotNipi](#):
>
> For `.RCButtons2` will not work because you can't send messages to style declaration.  
> If you need dynamically change the color, put some default color here, and make it dynamic in the way you did it before, inside that template where button is.

Interesting.

This is my "base" for that working:

(I hope I get all the stuff needed)

```auto
[{"id":"576062c5.31c064","type":"debug","z":"8bb4de19.f72c88","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":960,"y":1300,"wires":[]},{"id":"88edaa29.60684","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"6","order":12,"width":1,"height":1,"format":"<style>\n.button {/*button styles*/}\n.B{ color: red;}\n.A{ color: lime;}\n</style>\n\n<button class=\"baseline {{msg.payload}}\" ng-mousedown=\"send({payload: 'Down'})\" \nng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":790,"y":1300,"wires":[["d08b68e5.aa949","76a653ec.ae4d34","576062c5.31c064"]]},{"id":"d08b68e5.aa949","type":"trigger","z":"8bb4de19.f72c88","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":950,"y":1350,"wires":[["28a8ab64.3a4394"]]},{"id":"76a653ec.ae4d34","type":"switch","z":"8bb4de19.f72c88","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":940,"y":1390,"wires":[[],["28a8ab64.3a4394"]]},{"id":"28a8ab64.3a4394","type":"function","z":"8bb4de19.f72c88","name":"toggle","func":"let msg1 = {};\nlet y = context.get(\"pressed\") || 0;\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n context.set(\"counter\",0);\n msg.payload = \"A\";\n context.set(\"pressed\",0); // Wipe count.\n// msg1.colour = \"lime\";\n\n return [msg,null];\n}\n\nif (x === 0)\n{\n if (y === 0)\n {\n // Send pressed message.\n y = y + 1;\n context.set(\"pressed\",y);\n // msg1 = {payload:\"Goo\"};\n msg1 = {payload:\"Pressed\"};\n node.send([null,msg1]);\n //node.send([null,msg1]);\n \n }\n msg.payload = \"B\";\n msg1.colour = \"red\";\n} else\nif (x === 1)\n{\n msg.payload = \"A\";\n msg1.colour = \"lime\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,null];","outputs":2,"noerr":0,"x":1100,"y":1350,"wires":[["af2e86ca.3546b","88edaa29.60684","a33d9067.50ce3"],["b6647fef.aa089"]]},{"id":"af2e86ca.3546b","type":"debug","z":"8bb4de19.f72c88","name":"PULSE OUTPUT","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1300,"y":1300,"wires":[]},{"id":"a33d9067.50ce3","type":"ui_text","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","order":13,"width":2,"height":1,"name":"","label":"6 : ","format":"{{msg.payload}}","layout":"row-spread","x":1260,"y":1260,"wires":[]},{"id":"b6647fef.aa089","type":"debug","z":"8bb4de19.f72c88","name":"SINGLE OUTPUT","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1300,"y":1350,"wires":[]},{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":17,"width":1,"height":1,"format":"<style>\n/* Best so far to fit 1x1 area */\n.baseline {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: black; /* Backfound colour */\n color: {{msg.colour}}; /* \"Font\" (forground) colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px;\n cursor: pointer;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"global","x":1040,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","z":"","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":"6","collapse":false},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":4}]

```

Sorry it is a bit spread out.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 13:14 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/42 "2020-04-21T13:14:48Z")

</div>

Looking in my `template` node at the code, I see the colour stops halfway through.

(See attached.)

![Screenshot from 2020-04-21 23-13-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d59bb430f63d6e6c40adf438a1604663944056d9.png)

Yeah, ok.

Fixed it.

(I think it is time for bed.)

23:28 local here and I've been up since .... 07:00.

That's working now. Sorry.

Tomorrow: How to get the icons working in the buttons.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 April 2020 13:31 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/43 "2020-04-21T13:31:38Z")

</div>

This is not the ideal way.

As I said waaaaay back... (Remember the story about having colors littered in code and styles and CSS and how if you need to change something it's a massive cludge?)

You make your classes based on state you are trying to achieve (e.g. success, warning, pressed, active, whatever) set up them classes with all the colours you need THEN set the buttons class accordingly.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 13:38 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/44 "2020-04-21T13:38:20Z")

</div>

Yes Steve, I agree.... This is the practice stage.

Though _wrong_, I am saying colours only to reduce the number of names I need to remember at this stage. Then if I see `red`, I know it is going to be `red`.

As I move on, I will start to give them names.

Also this part is simply to blink/flash a button when it is pressed and held down.

But I do get what you say.

I got the buttons working again and all that.

The colour in the code was what @hotNipi was saying. I am not allowed to do that line and so it _spat the dummy_ at me.

Line fixed and colour assigned.

All working.

I think bed is calling me now.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [21 April 2020 15:46 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/45 "2020-04-21T15:46:04Z")

</div>

When sun is up again, take a look of this.  
There is example of different buttons in `ui_template`. My suggestion for you is keep all the buttons (at least those you need to represent that remote control) logically similar.

```auto
[{"id":"6c79b417.1e43ac","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon momentary (info)","order":3,"width":1,"height":1,"format":"<div id=\"momentary_info\">\n <md-button class=\"md-button remote-button\">\n <i class=\"fa fa-fw fa-info-circle remote-icon\"></i>\n </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n \n$('#momentary_info').on('touchstart mousedown', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"momentary_info\",\"payload\": true});\n});\n\n$('#momentary_info').on('touchend mouseup', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"momentary_info\",\"payload\": false});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":230,"wires":[["c8aaf013.c7c55"]]},{"id":"1878ce1f.a925a2","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"","order":7,"width":0,"height":0,"format":"<style>\n :root {\n --dashboard-unit-width: 48px;\n --dashboard-unit-height: 48px;\n }\n .nr-dashboard-template {\n padding: 0px;\n }\n .remote-button:not([disabled]):hover{\n background-color: #232323 !important;\n }\n .remote-button{\n background-color: black !important;\n color: #cccccc !important;\n height: var(--dashboard-unit-height);\n width: 100%;\n font-size:1.4em;\n font-weight:bold;\n }\n .remote-button.red{\n background-color: red !important;\n color: #cccccc !important;\n }\n .remote-button.red:not([disabled]):hover{\n background-color: orange !important;\n }\n .remote-icon{\n font-size:1.1em;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":260,"y":60,"wires":[[]]},{"id":"c8aaf013.c7c55","type":"debug","z":"1d0f488b.6d7047","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":500,"y":210,"wires":[]},{"id":"d86a8270.48f57","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"regular btn (1)","order":1,"width":1,"height":1,"format":"<div id=\"regular_1\">\n <md-button class=\"md-button remote-button\">1\n </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_1').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"momentary_regular\",\"payload\": 1});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":270,"y":110,"wires":[["c8aaf013.c7c55"]]},{"id":"dc3e2186.c7243","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon regular (plus)","order":4,"width":1,"height":1,"format":"<div id=\"regular_plus\">\n <md-button class=\"md-button remote-button\">\n <i class=\"fa fa-fw fa-plus remote-icon\"></i>\n </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n \n$('#regular_plus').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"regular_plus\",\"payload\": \"+\"});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":190,"wires":[["c8aaf013.c7c55"]]},{"id":"36c4e354.609f9c","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon momentary (arrow up)","order":5,"width":1,"height":1,"format":"<div id=\"arrow_up\">\n <md-button class=\"md-button remote-button\">\n <i class=\"fa fa-fw fa-chevron-up remote-icon\"></i>\n </md-button>\n</div>\n\n<script>\n(function($scope) {\n \n$('#arrow_up').on('touchstart mousedown', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"arrow_up\",\"payload\": true});\n});\n\n$('#arrow_up').on('touchend mouseup', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"arrow_up\",\"payload\": false});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":270,"wires":[["c8aaf013.c7c55"]]},{"id":"42f32299.e35eac","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"btn + icon momentary (arrow down)","order":6,"width":1,"height":1,"format":"<div id=\"arrow_down\">\n <md-button class=\"md-button remote-button\">\n <i class=\"fa fa-fw fa-chevron-down remote-icon\"></i>\n </md-button>\n</div>\n<script>\n(function($scope) {\n \n$('#arrow_down').on('touchstart mousedown', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"arrow_down\",\"payload\": true});\n});\n\n$('#arrow_down').on('touchend mouseup', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"arrow_down\",\"payload\": false});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":280,"y":310,"wires":[["c8aaf013.c7c55"]]},{"id":"238c4049.1d19f","type":"ui_template","z":"1d0f488b.6d7047","group":"634d61cd.c6a26","name":"regular btn different color (X)","order":2,"width":1,"height":1,"format":"<div id=\"regular_red\">\n <md-button class=\"md-button remote-button red\">X\n </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_red').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"regular_red\",\"payload\": \"x\"});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":240,"y":150,"wires":[["c8aaf013.c7c55"]]},{"id":"634d61cd.c6a26","type":"ui_group","z":"","name":"HOME","tab":"6766858b.dee74c","order":1,"disp":true,"width":3,"collapse":false},{"id":"6766858b.dee74c","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

You can't just apply tha CSS from here to your current solution cos this is prepared to only have buttons in `ui_template`. Which most probably means for you to start over.... sorry about that.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 April 2020 22:46 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/46 "2020-04-21T22:46:31Z")

</div>

> [@hotNipi](#):
>
> You can't just apply tha CSS from here to your current solution cos this is prepared to only have buttons in `ui_template` . Which most probably means for you to start over.... sorry about that.

No problems.

I've loaded the flow and am looking at it.

Just saying:  
This is where I am a bit ..... annoyed with `CSS`.  
Granted it is an overall scheme that allows me to do lots of things.

But where I am at learning, I can't (or don't seem able) to keep the things separate.  
So to use _this_ I have to disable all my other stuff. No problem. Just saying.

So there is the possible problem that things I have put in my `CSS` stuff will conflict with this.  
(Can't say for sure, but I am guessing you used all new names, for which I am very happy and appreciative.)

But somewhere in the scheme things _went south_.  
The buttons were sent with a 1x1 size.  
On my screen they are _corrupt_ and have sliders at the bottom and right side.  
To get them half working they need to be 2x2. Actually even with 2x2 they aren't big enough.  
They need to be 3x2 (left-right x height)

Again: No big. I guess there is some tweaking that will get them working.

To digress a bit.

I was thinking of what I posted last night:  
I don't need a second button definition as I posted.  
I added that extra bit of code - which was mentioned - and that allows me to change the text colour anyway. So that whole second button definition is not needed.

> [@hotNipi](#):
>
> My suggestion for you is keep all the buttons (at least those you need to represent that remote control) logically similar.

I fully agree with that.

I'll read the code - well: look at it. I don't know if I can actually _read_ it, as in: make sense of it - and see what I can get from it.

Though again:  
If I want to try things, it isn't that I can simply `copy` the node (for a backup) and try the new node.  
The codes will conflict. Yes, I can disable it.... Anyway.

I'm off to read the code.

I've played with the code and got some results. But I feel I am going nowhere fast.

Things I see:  
The `font-awesome` icons are _fixed-width_. Errr, why?  
The _Info_ icons is a bit small. Despite my best efforts, I can't make it bigger.

I've got control of the button height.  
They are now 48 pixels high.  
But they are 102 pixels wide.

Again: Despite my best efforts I can't change that.  
I can't see a _Width_ value.  
I commented out the _width: 100%_ line. nothing changed.

Anyway, I'll keep plodding along. Alas I am a blind man without a stick walking on an unknown surface that seems to be inconsistent in its feeling. But enough analogies.

Bye for now.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 03:42 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/47 "2020-04-22T03:42:09Z")

</div>

What sizes do you have defined  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2ff065b3736bbe60f064ad60114a42f799454fef.png)

I make my settings same so I can see same results as you.  
Then let's take it step by step and be concentrated.

First task - make button sizes correct.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 08:45 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/48 "2020-04-22T08:45:41Z")

</div>

Well, I don't think I changed anything.

This is what I see.

On one of my early machines I changed the size and got in to a whole lot of problems with dashboards, etc. So I reset it to the defaults.

But by the time I got this machine, I left them alone.

 ![Screenshot from 2020-04-22 18-37-13](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/eb969d55d3037c4c35a7f2a7d42f7c4250b67359.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 08:59 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/49 "2020-04-22T08:59:19Z")

</div>

Does the template size for this button is meant to be 1x1 units? (in dashboard it makes 48px x 48px )

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5ca7b4d06ce8236fe86fc9f6fc8dce9fb9888afe.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 09:03 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/50 "2020-04-22T09:03:22Z")

</div>

The buttons I want to make (for this project) are 1 x 1. Using..... _devtools_ ?? the buttons show 48 x 48

![Screenshot from 2020-04-22 19-00-35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4bea1779a7b5c7a0226da6028647e356c406413.png)

 ![Screenshot from 2020-04-22 19-01-18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d777fee881b20817c8697fb37c750fd56d1eaa4e.png)

And this is what I have _done_ to the main `template` code you posted.

```auto
<style>
/* :root {
      --dashboard-unit-width: 48px;
      --dashboard-unit-height: 48px;
    } */
    .nr-dashboard-template {
        padding: 0px 0px;
    }
    .remote-button:not([disabled]):hover{
         background-color: #232323 !important; /* This is the colour it becomes when you hover the mouse*/
    }
    .remote-button{
        background-color: black !important;
        color: #cccccc !important;
        height: 48;
        width: 48;
        /*width: 100%;*/
        font-size:14px; /* was 1.4em */
        /*font-weight:bold; */
    }
    .remote-button.red{
        background-color: red !important;
        color: #cccccc !important;
    }
    .remote-button.red:not([disabled]):hover{
         background-color: orange !important;
    }
    .remote-icon{
        font-size:14px; /* font-size:1.1em; */
    }
</style>

```

That got the 48 (height) working better.

If it was what you posted, I had sliders around all buttons because the were too big.

This is what they look like - bigger picture.

The first one is 2 x 1. the rest are 2 x 2.

![Screenshot from 2020-04-22 19-06-05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/295bb312321c24c1dee716dec8cec6e1c96fbfe3.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 09:11 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/51 "2020-04-22T09:11:31Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/9496aa7d8fb14cd2d9472db8891e091e56541407.png)

This is what it should look.  
Can you please put everything back as it was and then lets keep stepping slowly...  
Then,  
To be sure - please close that browser tab where dashboard is, try to redeploy, and then open the browser tab with dashboard again.

That done, just show the result.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 09:21 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/52 "2020-04-22T09:21:19Z")

</div>

(This is kind of why I don't like `CSS`.)

Ok, I _reset_ (or more so set) the values to what you show.

Even did a `node-red-restart` command from the CLI.

I also had to get your original code and re-import it.

I disabled the tab with the code I _hacked_ and opened a new tab **in a different browser** to be even more sure about caching. Chromium.

Imported, deployed and looked at the graphics/dashboard.

 ![Screenshot from 2020-04-22 19-17-45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1eb0112ced43bd3aa1bdd20e2fecc839d663d4bb.png)

 ![Screenshot from 2020-04-22 19-17-50](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/11d680e4f1266265868d194b1a2e7cbb62a915bc.png)

Oh, and from ...... _devtools_....

 ![Screenshot from 2020-04-22 19-21-44](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a9432579694f4108c288822c822809c49212fbe.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 09:24 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/53 "2020-04-22T09:24:10Z")

</div>

OK.  
To be sure, one by one, make sure that the all the buttons are 1x1

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6dc1994ad007eb2a41b342f72a93148e0972c9ec.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 09:26 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/54 "2020-04-22T09:26:14Z")

</div>

Yes, I did that when I saw the size. (Oh ^&_^&_! Wrong size.)

Sorry.

I flicked back and it is your code - raw. No edits.

Also - remember - I `restarted` node-red after changing the sizes to make extra sure.  
That can't have hurt - could it?

 ![Screenshot from 2020-04-22 19-25-05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5d38da1ad2396918a1e7f549c95afa4f9ae9851.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 09:33 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/55 "2020-04-22T09:33:19Z")

</div>

Slightly modified but still same, please replace with this and lets then dig into browser dev tools

```auto
<style id="remote-buttons">
    :root {
      --dashboard-unit-width: 48px;
      --dashboard-unit-height: 48px;
    }
    .nr-dashboard-template {
        padding: 0px;
    }
    .remote-button:not([disabled]):hover{
         background-color: #232323 !important;
    }
    .remote-button{
        background-color: black !important;
        color: #cccccc !important;
        height: var(--dashboard-unit-height);
        width: 100%;
        font-size:1.0em;
        font-weight:bold;
    }
    .remote-button.red{
        background-color: red !important;
        color: #cccccc !important;
    }
    .remote-button.red:not([disabled]):hover{
         background-color: orange !important;
    }
    .remote-icon{
        font-size:1.0em;
    }
</style>

```

Show me how this part looks like. (must contain whole `<head>` tag)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c8407044b3e89aa4ec4bc1795f7ae0aaf42b9e1.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 09:34 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/56 "2020-04-22T09:34:27Z")

</div>

You may need to qualify where this new code is put. Sorry.

Knowing me I would put it in the wrong place.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 09:36 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/57 "2020-04-22T09:36:49Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a4c3205b5ecb036f7fe86a37074b303e5b54c4ef.png)

Sorry for hand shake 😃

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 09:40 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/58 "2020-04-22T09:40:10Z")

</div>

Sorright.

Ok, done.

Yet again, you may have to show me where on the screen I put my mouse to get that output.

Randomly placing it on parts of the screen is not really working.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 April 2020 09:42 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/59 "2020-04-22T09:42:55Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d829f8dbbd135d126e1109231091f9d7ecf233b.png)

Elements tab and scroll to top, then you see the `<head>` tag beginning and somewere it ends `</head>`

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 April 2020 09:45 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/60 "2020-04-22T09:45:56Z")

</div>

This?

 ![Screenshot from 2020-04-22 19-45-00](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c7f723f454beebb7b56db22c2fe44adf8bf34d80.png)

I think it would be better if there is/was a way to paste stuff like in Node-Red.  
Anyway.

But this may not be helping....

 ![Screenshot from 2020-04-22 19-46-58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35b6addb7ff3cac128619af4e182d17f04f70ede.png)

[Previous page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=2)

[Next page](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178.md?page=4)