# Q: Tiles type panels

**URL:** <https://discourse.nodered.org/t/q-tiles-type-panels/35245>\
**Category:** Dashboard\
**Created:** [2 November 2020 21:42 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245 "2020-11-02T21:42:53Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [2 November 2020 21:42 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/1 "2020-11-02T21:42:53Z")

</div>

I have a play with the Dashboard and it fine for a basic design i have ended up with but i'd like to  
get a little bit more elegant.

Used the Switch node to do this.  
 ![Screenshot 2020-11-02 213735](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/156b119804c6fdee5e6b1c5aad9bf3a410be8ea3.png)

but i'd like to try make it look like this if its possible..

Not to fussed about the - + bit.. just more doing the tile effect.

probably lots of clever CCS no doubt.

![Screenshot 2020-11-02 214023](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29818f824d42440a098357bed8421faf7ac20d17.png)

Any pointers if its even possible.

ta

I've tried doing it as a Button in separate groups .. but i get no control on how they are layed out on the canvas..

![Screenshot 2020-11-02 221100](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1477c8b4829931117a0deb2089908e1525ab0b6.png)

If i show the group name it then get ugly again.. so these seem to sit to the right of the main group.

---

<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:** [3 November 2020 00:06 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/2 "2020-11-03T00:06:58Z")

</div>

So something like this can be done with button and a little of CSS

```auto
[{"id":"fbdc8e1c.ca83b","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":"2","height":"2","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":590,"y":260,"wires":[[]]},{"id":"1c2c3778.2270e9","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"ui_control","v":"{\"icon\":\"fa-4x fa-home\"}","vt":"json"},{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"0.1","topic":"","payload":"1","payloadType":"str","x":270,"y":260,"wires":[["fbdc8e1c.ca83b","40b55faf.c2915","e73ebe1e.fe05d"]]},{"id":"13d9bcd2.5331a3","type":"ui_template","z":"9038de34.04db3","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n\n #Dashboard_STYLED_cards > md-card > button {\n padding-top: 10px !important;\n position: relative;\n text-align: center;\n line-height: 24px;\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n \n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":580,"y":220,"wires":[[]]},{"id":"40b55faf.c2915","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":"2","height":"2","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":590,"y":300,"wires":[[]]},{"id":"25ff69f5.486456","type":"ui_button","z":"9038de34.04db3","name":"","group":"110f893b.a0f1d7","order":0,"width":"2","height":"2","passthru":false,"label":"{{msg.topic}}","tooltip":"","color":"","bgcolor":" {{background}}","icon":"","payload":"","payloadType":"str","topic":"","x":610,"y":340,"wires":[[]]},{"id":"4e5905d5.f93fbc","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"3","height":"1","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":470,"y":480,"wires":[[]]},{"id":"e9d6dd00.d865e","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"ui_control","v":"{\"icon\":\"fa-2x fa-home\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":480,"wires":[["4e5905d5.f93fbc","d9ed33e8.564e8"]]},{"id":"d9ed33e8.564e8","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"3","height":"1","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":470,"y":520,"wires":[[]]},{"id":"e73ebe1e.fe05d","type":"change","z":"9038de34.04db3","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"#808080","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"HOME","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":340,"wires":[["25ff69f5.486456"]]},{"id":"110f893b.a0f1d7","type":"ui_group","z":"","name":"STYLED","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"855d3e6d.56036","type":"ui_group","z":"","name":"DEFAULT","tab":"7179c13.0628d4","order":2,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [3 November 2020 14:49 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/3 "2020-11-03T14:49:38Z")

</div>

thats really cool hotNipi, thanks for taking the time to mock up what i was thinking 🙂

so just need some little functions or something around them to behave like an on/off state/action.  
i'm sure i can figure that out..

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [3 November 2020 16:24 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/4 "2020-11-03T16:24:19Z")

</div>

Just to be curious.

how did you know what CCS to use.

#Dashboard\_STYLED\_cards \> md-card \> button

and

you are passing the ICON to the button via UI\_CONTROL and passing the ICON data

is there a list of these fieldnames for UI\_CONTROL.. is it the same for say the other ui nodes?

ta

---

<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:** [3 November 2020 16:43 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/5 "2020-11-03T16:43:21Z")

</div>

> [@Kazzy](#):
>
> how did you know what CCS to use.

I once took a time to learn the structure of dashboard. And to keep my knowledge base up to date, I take a little challenges like this with pleasure 🙂

As you wanted your buttons to represent the state of something, you probably need to have oportunity to change the icon or icon styles dynamically. That's the reason i did it that way. You can change color of icon as the state independently of the text and background color.  
Feel free to ask how to do it if needed..

To surround the button with functions - before the button should be function which is triggered by some state change event, that function should be able to figure out what to send to button according to incoming state.  
After the button (depends on what your buttons do) but I'd recommend another function which has 2 outputs. One to send out for processing, and the other to send back to button. That other should make the button disabled.  
Then after processing, you expect some feedback and that feedback is again same event which makes your button to represent correct state. (and button enabled)  
Ask for example if my explanation feels too complicated..

[Widget configuration via msg.ui\_control](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md#ui-widget-configuration-via-msgui_control)

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [4 November 2020 20:07 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/6 "2020-11-04T20:07:37Z")

</div>

Im Back 😃

I've started to get the Button Toggle working.. it took a little think as the Button only returns  
one response when click.. so got that working now as a toggle on/off (looks very nice!)

How can i style the TEXTbox node so it looks similar.. so eg.. Background colour and text centred, but no icons required.. just want to use it a separator. currently it just White text is the default.

try to just do CSS #System\_Main\_cards \> md-card \> nr-dashboard-text  
didnt do anything .. but was expected as i was just going in blind :lol:

If i inspect the TEXTBox area i see

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/706613cb3c70d7e32b16c1ba9910fd2cec8df7f8.png)

so try to see what do you look for to tweek at?

here what my button flow now looks like.. I have Philip Hue Bulbs.

 ![Screenshot 2020-11-04 201251](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58af700705ee7d405ed6f9260cf42a79fec714f6.png)  
so repeated that for each bulb.

---

<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:** [4 November 2020 20:10 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/7 "2020-11-04T20:10:31Z")

</div>

Wait for a little I'll get a computer 🙃

About `#System_Main_cards`  
I guess that you have at least a slight understanding about the rules from where this wording of element selector originates. (There is a tab called System where is a group called Main)  
(Stating that out just to be sure we are about on same level of situation)  
Any rule created that way only affects inside that selector. Even for classes.

But, the structure is not common for all elements. So for text widget (nr-dashboard-text) it takes a little brutal force to have some effect.  
So in my case for background color:

```auto
 #Dashboard_STYLED_cards > md-card.nr-dashboard-text{
           background-color: #097479 !important 
    }

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2734accefcdd864559a5788e14898ca710c54ae.png)  
For text alignment to center you can adjust it from widget configuration and it works. But if something different needed ...

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [4 November 2020 21:11 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/8 "2020-11-04T21:11:20Z")

</div>

> [@hotNipi](#):
>
> `#Dashboard_STYLED_cards > md-card.nr-dashboard-text{`

Many thanks.. yeah i was able to figure out the `#Dashboard_STYLED_cards` was referring  
to how the dashboard was layed out.. it did take a little time before i was OHhhhhh i see..

So i was pretty close .

i was doing `#System_Main_cards > md-card > nr-dashboard-text {`

so why `md-card.nr-dashboard-text` instead of ` md-card.nr > dashboard-text{`

Maybe this was a CLASS.. where Button it was broken down to a TYPE.

as this is a global change to the current tab view.. it make it tricky added normal text info  
so i might have to rethink what i was trying to do 🙂

All great learning information though.. i can see i'll spend ages just moving panels around .

---

<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:** [4 November 2020 21:16 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/9 "2020-11-04T21:16:53Z")

</div>

> [@Kazzy](#):
>
> so why `md-card.nr-dashboard-text` instead of ` md-card.nr > dashboard-text`

Read it from here. That is quite of thing to know.

> **[CSS Combinators](https://www.w3schools.com/css/css_combinators.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

And may be a little more from here

[https://www.w3schools.com/cssref/css\_selectors.asp](https://www.w3schools.com/cssref/css_selectors.asp)

In addition for:  
#System\_Main\_cards \> md-card.nr-dashboard-text

There is 2 paragraphs inside that element. one has class .value, which applies the bold rule. So You can play with them also.

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [6 November 2020 14:52 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/10 "2020-11-06T14:52:48Z")

</div>

quick one mate.

in your example, you had two examples.. one as 2x2 button.. and then another 4x1 so it was a ICON and then Text.

I saw you did that as two seperate groups, so you applied the style to just one group.

Is there anyway to do that but with the same group?

IE can you target the style to a per button only rather than it be for all buttons?

ta.

---

<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:** [6 November 2020 16:52 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/11 "2020-11-06T16:52:12Z")

</div>

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

That's a bit tricky but doable. You should find something common or uncommon in that element cascade.  
And then you can do selector which affects based that commonness.

For example those buttons are inside `md-card` with size `2x2` units.  
In html it is written to `ui-card-size` attribute

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

So taking this as common, the CSS will be:

```auto
#Dashboard_STYLED_cards > md-card[ui-card-size="2x2"] > button{
        padding-top: 10px !important;
        position: relative;
        text-align: center;
        line-height: 24px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

```

Only thing what can be unique at the button is its `aria-label` and that is true only if all your buttons have different labels and you don't override the label with `msg.something`. Buttons don't have any id so not much to look at that level.

And also the` nth-child` selector may work

> **[Useful :nth-child Recipes | CSS-Tricks](https://css-tricks.com/useful-nth-child-recipies/)**
>
> I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!

---

<div class="post-metadata">

**Author:** ![Kazzy](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Kazzy](https://discourse.nodered.org/u/Kazzy)\
**Post date:** [6 November 2020 19:27 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/12 "2020-11-06T19:27:13Z")

</div>

wow that really cool.. and so simple once you know how... and thanks for the Nth Child link i can think that could be useful in some ways later .. i'll have to have a play.

 ![Screenshot 2020-11-06 192610](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a917e28d830192dc6ef879f3610750e88dde7b1.png)

here your handy work in action.. i can tweak colours/layouts later.. just want to get the basics feel of it all first.

---

<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:** [6 November 2020 19:49 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/13 "2020-11-06T19:49:33Z")

</div>

Seems like I have deserved a little sauna and couple of beers. Chers 🍻

 ![20201106_214235](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/85cf78dec4729ffd2e154dae13288403116c73ac.jpeg)

---

<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:** [20 November 2020 19:49 UTC](https://discourse.nodered.org/t/q-tiles-type-panels/35245/14 "2020-11-20T19:49:37Z")

</div>

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