# The shape of a button

**URL:** <https://discourse.nodered.org/t/the-shape-of-a-button/90853>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 September 2024 14:03 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853 "2024-09-10T14:03:38Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 September 2024 03:16 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/21 "2024-09-11T03:16:49Z")

</div>

> [@gerry](#):
>
> cannot import your code into dashboard 2

I have not posted any dashboard 2 code. Yet.

The code I posted was for dashboard 1, the button I am trying to migrate to the new dashboard.

I have made some progress - I can now style a DB2 button so that it stays round (or square) as the browser window changes size. Fixed size though.

And, briefly and tantalisingly, a round button that both scaled and stayed round at different resolutions. It looked horrible though and in attempting to improve it I broke it.

Perhaps in the new day I'll be able to post these.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 September 2024 08:01 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/22 "2024-09-11T08:01:06Z")

</div>

> [@jbudd](#):
>
> And, briefly and tantalisingly, a round button that both scaled and stayed round at different resolutions. It looked horrible though and in attempting to improve it I broke it.

From my previous example, to make the button consistently round:

```css
.square {
    width: var(--sq, 5em);
    height: var(--sq, 5em);
    border-radius: var(--sq, 5em);
}

```

The border radius needs to be the same as the width & height.

---

<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:** [11 September 2024 08:39 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/23 "2024-09-11T08:39:24Z")

</div>

Replica based on your image.

```auto
[{"id":"26226084d8643fce","type":"ui-button","z":"08cec6dca3b7191e","group":"ca22afd36f4e1904","name":"","label":"","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"round-button power-button","icon":"power mdi-36px","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"#e7e7e7","textColor":"","iconColor":"gray","x":790,"y":540,"wires":[[]]},{"id":"5a6d5e44e99eaf9d","type":"ui-template","z":"08cec6dca3b7191e","group":"","page":"","ui":"538ceff32af2078f","name":"","order":0,"width":0,"height":0,"head":"","format":".square-button, .round-button{\n aspect-ratio: 1; \n width: var(--widget-row-height);\n}\n.round-button button{\n border-radius:var(--widget-row-height); \n}\n.power-button button{\n border: 2px solid #858585;\n}\n.power-button button .v-icon{ \n filter: drop-shadow(0px 0px 1px black);\n}\n.power-button.on button .v-icon{\n color:rgb(19, 189, 19);\n}\n.power-button.off button .v-icon{\n color:rgb(248, 53, 53);\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":800,"y":500,"wires":[[]]},{"id":"7bc92efc8a4cfbab","type":"inject","z":"08cec6dca3b7191e","name":"on","props":[{"p":"class","v":"on","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":550,"y":540,"wires":[["26226084d8643fce"]]},{"id":"33cf8bc18ad7ac24","type":"inject","z":"08cec6dca3b7191e","name":"off","props":[{"p":"class","v":"off","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":550,"y":580,"wires":[["26226084d8643fce"]]},{"id":"ca22afd36f4e1904","type":"ui-group","name":"G3","page":"ce26d025b6983eb8","width":"6","height":"1","order":1,"showTitle":true,"className":"special-grid","visible":"true","disabled":"false"},{"id":"538ceff32af2078f","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"ce26d025b6983eb8","type":"ui-page","name":"Page 1","ui":"538ceff32af2078f","path":"/page1","icon":"home","layout":"grid","theme":"69a62bf96d1279fd","order":1,"className":"","visible":"true","disabled":"false"},{"id":"69a62bf96d1279fd","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#1c1c1c","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 September 2024 09:18 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/24 "2024-09-11T09:18:39Z")

</div>

My best efforts with DB2: a round button with a fixed size and an oval "pill" button that is responsive.  
 ![firefox_oMdqvULJJi](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/8217979b6d6b3bf9101a052b3457446d5f9b2ed0.gif)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/9740aac1ae788a474abfd13c01dc0602d11f29ac.png)

```auto
[{"id":"bd54913827144c1e","type":"ui-button","z":"69594495cf1ea8a1","group":"97fe32d54dfd638a","name":"Round, fixed","label":"","order":1,"width":"2","height":"2","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"round","icon":"power","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"#fff","textColor":"","iconColor":"","x":150,"y":180,"wires":[["69bc3449af677fe2"]]},{"id":"3ff699673ad11a6b","type":"ui-template","z":"69594495cf1ea8a1","page":"dd9e211ef4e39083","name":"","order":0,"width":0,"height":0,"head":"","format":".round i, .pill i {\ntext-shadow:\n-1px -1px 1px #444444,\n1px -1px 1px #444444,\n-1px 1px 1px #444444,\n1px 1px 1px #444444,\n0px 0px 10px #888888;\n}\n\n.round button {\n font-size: 3em;\n border-radius: 50%;\n min-height: 6rem;\n max-height: 6rem;\n min-width: 6rem;\n max-width: 6rem;\n border: 3px solid #888888;\n box-shadow: inset rgba(20, 70, 85, 0.7) 0px 0px 20px -10px;\n}\n\n.pill button {\n font-size: 4vw;\n border-radius: 5rem;\n background-color:white;\n border: 3px solid #888888;\n box-shadow: inset rgba(20, 70, 85, 0.7) 0px 0px 20px -10px;\n}\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":150,"y":120,"wires":[[]]},{"id":"a4a5c7edbcbc8a80","type":"ui-button","z":"69594495cf1ea8a1","group":"97fe32d54dfd638a","name":"Oval, Responsive","label":"","order":2,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"pill","icon":"power","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":180,"wires":[["014e9f063e8532d5"]]},{"id":"69bc3449af677fe2","type":"function","z":"69594495cf1ea8a1","name":"Change foreground","func":"let color = context.get(\"roundbuttoncolor\") || \"white\"\nif (color === \"white\") {\n color = \"red\"\n}\nelse {\n color = \"white\"\n}\nmsg.ui_update = {}\nmsg.ui_update.iconColor = color \nmsg.ui_update.buttonColor = \"white\"\ncontext.set (\"roundbuttoncolor\", color)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":170,"y":220,"wires":[["bd54913827144c1e"]]},{"id":"014e9f063e8532d5","type":"function","z":"69594495cf1ea8a1","name":"Change foreground","func":"let color = context.get(\"roundbuttoncolor\") || \"white\"\nif (color === \"white\") {\n color = \"red\"\n}\nelse {\n color = \"white\"\n}\nmsg.ui_update = {}\nmsg.ui_update.iconColor = color \nmsg.ui_update.buttonColor = \"white\"\ncontext.set (\"roundbuttoncolor\", color)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":220,"wires":[["a4a5c7edbcbc8a80"]]},{"id":"97fe32d54dfd638a","type":"ui-group","name":"Experiments","page":"dd9e211ef4e39083","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"dd9e211ef4e39083","type":"ui-page","name":"Experiments","ui":"d45641ed6d39fea1","path":"/page2","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":1,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<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:** [11 September 2024 09:49 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/25 "2024-09-11T09:49:09Z")

</div>

Playing with this, overriding the grid layout rules for the card content I realized that it is actually missing feature for dashboard. And it should be quite easy to achieve.

The missing bit is the freedom for user to create/manage layout inside card content. That was the way the DB1 gave control to user.

So here:

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

What if instead of class `nrdb-layout-group--grid` there will be `nrdb-layout-group--free` which doesn't have any layout rules and no inline styles applied. The user can write own layout rules without need to fight with default grid layout. It would be much easier to start from scratch.

I think (not tried) most widgets render at least something. And even if it takes to write some CSS for widgets inside user created layout - it is very natural thing.

@joepavitt to think about...

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [11 September 2024 09:52 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/26 "2024-09-11T09:52:25Z")

</div>

Thanks @hotNipi - it's something to consider, but with big plans on sizing changes and layouts coming, we'll put this on the back burner for now

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 September 2024 12:12 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/27 "2024-09-11T12:12:43Z")

</div>

> [@jbudd](#):
>
> My best efforts with DB2: a round button with a fixed size and an oval "pill" button that is responsive.

Darn it! Do you realise the rabbit hole you sent me down! 😀

Latest versions - both square/rectange and circle/oval with easy overrides:

```css
.square {
    --sq: 5em;
    width: var(--sqw, var(--sq));
    height: var(--sqh, var(--sq));
    border-radius: calc(var(--sq) * 0.1);
}
.round {
    --rad: 5em;
    width: var(--sqw, var(--rad));
    height: var(--sqh, var(--rad));
    border-radius: var(--sqr, var(--rad));
}

```

```html
<button class="square" style="--sq: 10em;">Square dude!</button>
<button class="round" style="--rad: 10em;">Round dude!</button>

```

Change the shape simply by overriding one of the more detailed variables

```html
<button class="square" style="--sq: 10em;--sqw: 20em;">Rectangle</button>
<button class="round" style="--rad: 10em;--sqw: 20em;">Oval</button>

```

I'd not gone quite as far with localising CSS variables previously so this has been a really useful learning exercise. They are far more powerful than they first appear.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 September 2024 14:27 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/28 "2024-09-11T14:27:43Z")

</div>

> [@TotallyInformation](#):
>
> ```auto
> <button class="square" style="--sq: 10em;">Square dude!</button>
> <button class="round" style="--rad: 10em;">Round dude!</button>
> 
> ```

Are these buttons in a template node?  
It's a perfectly reasonable way to build a button, but my current interest is examples of what the basic button widget can do with a bit of CSS.

I like CSS variables too; have used them before but not exactly familiar with them.

Now then, while you are down that rabbit hole, consider some other shapes...

One of my attempts used clip path to display a circle which would remain circular at different resolutions.  
It did scale but a border won't work on a clipped element.  
In theory I should be able to use an ::after pseudo-element slightly smaller to get a border but I couldn't make it work.  
[https://www.geeksforgeeks.org/how-to-add-border-in-the-clip-path-polygon-using-css/](https://www.geeksforgeeks.org/how-to-add-border-in-the-clip-path-polygon-using-css/)

Then while browsing clip path polygon examples I remembered the 7500 Material Design icons. Some of them might make stylish buttons, not just as icons on a rectangular button but appearing as a button in the shape of the icon.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/04d11b5dc2513a3967b5af0af70cc7c09f84dc26.png)

So an invisible button with a visible icon might be handy? Box shadows to give an LED kind of glow. Perhaps even a CSS transformation in response to a click.  
Sounds possible?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 September 2024 17:57 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/29 "2024-09-11T17:57:20Z")

</div>

> [@jbudd](#):
>
> Are these buttons in a template node?

They are pure HTML, you can use them in a template node or anywhere that accepts HTML. No frameworks harmed in the making of these examples. 😉

But the concepts should be amenable to be included in D2 as well.

> [@jbudd](#):
>
> It did scale but a border won't work on a clipped element.

I've not really played with clip paths, a lot more complex and I've never needed to do that.

> [@jbudd](#):
>
> So an invisible button with a visible icon might be handy?

Personally, I would simply attach a click event to a `span` tag containing the icon. Really only quite large content is suitable for clipping except where you need a close wrap-around of text or an underlying image. They are no good at all for where users actually have to click things.

> [@jbudd](#):
>
> Box shadows to give an LED kind of glow. Perhaps even a CSS transformation in response to a click.

You could use a button (good for accessibility anyway) but make it transparent. Job done. By using an icon font or an SVG icon as the button content, you should be able to easily add a glow just to the icon.

> [@jbudd](#):
>
> Sounds possible?

With the caveats given, yes. Remember, keep it simple. You can add complexity later if really needed but it is hard to remove.

Of course, I don't really use D2 so I'll leave it to others to work out how to integrate to a D2 button widget. But, as I say, everything I've shown is pure HTML and CSS and so should certainly be applicable to D2. It's been a some time since I've needed to use VueJS or any other front-end framework. If I am going to do something interesting, I might as well use native HTML/CSS/JS since it will be applicable anywhere.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [14 September 2024 10:58 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/30 "2024-09-14T10:58:10Z")

</div>

If you're looking at raw HTML/CSS solutions here, you could consider `aspect-ratio` ([docs](https://css-tricks.com/almanac/properties/a/aspect-ratio/))

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 September 2024 11:08 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/31 "2024-09-14T11:08:14Z")

</div>

Not sure if that is addressed to me Joe.  
If it is, thanks.

I briefly looked at aspect ratio but at the moment I am more interested in buttons that stay the same size in different window sizes.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [14 September 2024 11:09 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/32 "2024-09-14T11:09:59Z")

</div>

> [@jbudd](#):
>
> I am more interested in buttons that stay the same size at different window sizes.

Change your layout type to "Fixed". That used fixed px widths, rather than the "Grid" layout which is a % of the width.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 September 2024 12:17 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/33 "2024-09-14T12:17:04Z")

</div>

I think "Fixed" or "Grid" applies to an entire page.

I welcome the idea of a responsive dashboard, eg graphs that fit the screen width.  
But I might want a round or square button which retains it's proportions regardless.

(I have posted my solution to this in "Share your projects")

---

<div class="post-metadata">

**Author:** ![kocherjj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kocherjj/32/20578_2.png) [@kocherjj](https://discourse.nodered.org/u/kocherjj)\
**Post date:** [14 September 2024 14:53 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/34 "2024-09-14T14:53:14Z")

</div>

I strongly second the request for buttons that maintain shape!

I have been attempting off and on for several months now to migrate my old dashboard to the new dashboard and given up in frustration every time. Considering the unusability of it in my experience I still think I must be doing something wrong because otherwise I would expect there to be many more complaints, but posts like this seem to show that at least I am not the only one with issues.

Here is an example of what I would consider a very simple and basic user interface, the Roku player controls for our home AV system. Each button is set to 2x1 with a page width of 6 to get three buttons across. Here is a screen capture from my cell phone with original Dashboard

 ![Screenshot_20240914-103140](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae343225a00e0594cffd72b7cb4b5ecdf002a3b6.png)  
Here is the flow to replicate this GUI

```auto
[
    {
        "id": "593ebd100baea3c7",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 21,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "OFF",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_unchecked",
        "payload": "/keypress/PowerOff",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "ab3543b316e8334d",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 16,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "BACK",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "reply",
        "payload": "/keypress/Back",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "9e6f9618812ffcf5",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 18,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "ON",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_checked",
        "payload": "/keypress/PowerOn",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 510,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "648be3b4e09173b6",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 14,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "HOME",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "home",
        "payload": "/keypress/Home",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 510,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "e1b2acea8cb29174",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "UP",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_upwards",
        "payload": "/keypress/Up",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "544c1937b863d09f",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 4,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "LEFT",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_back",
        "payload": "/keypress/Left",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "683ce182debf0833",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 5,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "SELECT",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "keyboard_return",
        "payload": "/keypress/Select",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "e97ea8c12e7fb7c8",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 6,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "RIGHT",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_forward",
        "payload": "/keypress/Right",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 500,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "a4545830d3436195",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 8,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "DOWN",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_downward",
        "payload": "/keypress/Down",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "8a32238179234f29",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 10,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "REV",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_rewind",
        "payload": "/keypress/Rev",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "31bc3113197ad452",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 11,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "PLAY/PAUSE",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "play_arrow",
        "payload": "/keypress/Play",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 280,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "977fdfd08ce6951f",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 12,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "FWD",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "payload": "/keypress/Fwd",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "5ebe06f76faced10",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 17,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "VOL +",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_up",
        "payload": "/keypress/VolumeUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "39b6903a6b162dc2",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 20,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "VOL -",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_down",
        "payload": "/keypress/VolumeDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "9d049fc0eb5247a1",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 19,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "CH +",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "payload": "/keypress/ChannelUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "ded9cd2666f4c038",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 22,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "CH -",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "payload": "/keypress/ChannelDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "1c043e8fb8fad9b0",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 15,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "MUTE",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_off",
        "payload": "/keypress/VolumeMute",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "8ae79f9d18d98c01",
        "type": "ui_group",
        "name": "Roku",
        "tab": "eaa4b109b78a7786",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "eaa4b109b78a7786",
        "type": "ui_tab",
        "name": "AV Controls",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

And here is the results when I attempt to duplicate this in Dashboard 2.0. Each button is set to 2x1 with a page width of 6. As you can see the button width is not even close to 2x1 as set in the button nodes, and the user interface is all but worthless!

 ![Screenshot_20240914-102548](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/2564b6759f0bb1ae08a49e9ca4a03352a21cf999.png)  
And the flow to replicate

```auto
[
    {
        "id": "9dd7b41ce0ec03fa",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "BACK",
        "order": 13,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "reply",
        "iconPosition": "left",
        "payload": "/keypress/Back",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "bd222b701778924c",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "OFF",
        "order": 17,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_unchecked",
        "iconPosition": "left",
        "payload": "/keypress/PowerOff",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "785654d45f31e5d1",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "ON",
        "order": 2,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_checked",
        "iconPosition": "left",
        "payload": "/keypress/PowerOn",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 490,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "9582438227e5cd6b",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "HOME",
        "order": 11,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "home",
        "iconPosition": "left",
        "payload": "/keypress/Home",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "bc303a364dde909d",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "UP",
        "order": 18,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_upwards",
        "iconPosition": "left",
        "payload": "/keypress/Up",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "6ffb1903a343c911",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "RIGHT",
        "order": 14,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_forward",
        "iconPosition": "left",
        "payload": "/keypress/Right",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 500,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "72cd2544549a3ea1",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "LEFT",
        "order": 16,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_back",
        "iconPosition": "left",
        "payload": "/keypress/Left",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "c6255cbb6e53a879",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "SELECT",
        "order": 15,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "keyboard_return",
        "iconPosition": "left",
        "payload": "/keypress/Select",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "1ebcdbb37d4740e4",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "DOWN",
        "order": 12,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_downward",
        "iconPosition": "left",
        "payload": "/keypress/Down",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "f50379fd2aee223a",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "REV",
        "order": 10,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_rewind",
        "iconPosition": "left",
        "payload": "/keypress/Rev",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "0feedac8aea8ff3d",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "VOL +",
        "order": 3,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_up",
        "iconPosition": "left",
        "payload": "/keypress/VolumeUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 70,
        "y": 540,
        "wires": [
            []
        ]
    },
    {
        "id": "7cdef30e3c417fdf",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "VOL -",
        "order": 4,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_down",
        "iconPosition": "left",
        "payload": "/keypress/VolumeDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 70,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "de4c413a498c593c",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "MUTE",
        "order": 5,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_off",
        "iconPosition": "left",
        "payload": "/keypress/VolumeMute",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "3290c691e7af60b2",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "PLAY/PAUSE",
        "order": 9,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "play_arrow",
        "iconPosition": "left",
        "payload": "/keypress/play",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 320,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "5645abc1ace41c70",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "FWD",
        "order": 8,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "iconPosition": "left",
        "payload": "/keypress/Fwd",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "6aba0a8f73239b5d",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "CH +",
        "order": 6,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "iconPosition": "left",
        "payload": "/keypress/ChannelUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 540,
        "wires": [
            []
        ]
    },
    {
        "id": "b3da0a7a2f82cfd4",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "CH -",
        "order": 7,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "iconPosition": "left",
        "payload": "/keypress/ChannelDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "67172933099081b6",
        "type": "ui-group",
        "name": "Roku",
        "page": "e3a1a003d3c5fd05",
        "width": "6",
        "height": "10",
        "order": 3,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e3a1a003d3c5fd05",
        "type": "ui-page",
        "name": "AV Controls",
        "ui": "e288362879756c05",
        "path": "/AV_Controls",
        "icon": "home",
        "layout": "grid",
        "theme": "e4e51d0dcd1c0e6d",
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e288362879756c05",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "e4e51d0dcd1c0e6d",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

And here is the result when I change the layout from Grid to Fixed. It doesn't help.

 ![Screenshot_20240914-104104](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/957caa9c22e692e133e4cd7ba6b2b9fe21350fc2.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [14 September 2024 15:14 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/35 "2024-09-14T15:14:14Z")

</div>

> [@kocherjj](#):
>
> As you can see the button width is not even close to 2x1 as set in the button nodes, and the user interface is all but worthless

Because of our responsiveness, we render 3 columns at mobile.

We haven't (yet) expoaed this as configurable. But I will accelerate this up the to-do list: [Expose Mobile Columns in Layout Config · Issue #1291 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1291).

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [14 September 2024 15:17 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/36 "2024-09-14T15:17:32Z")

</div>

> [@jbudd](#):
>
> But I might want a round or square button which retains it's proportions regardless.

This is part of the plan in [Overhaul group and widget sizing options · Issue #835 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/835)

We will remove the sizing widget, and instead expose two inputs (one for width, and one for height), then you would choose "Columns", "px", "Fill Parent" or "Fit to Content" for each dimension. Giving complete control

---

<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:** [14 September 2024 15:41 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/37 "2024-09-14T15:41:31Z")

</div>

Here's how it can be done with current state of the DB2. Who knows if it changes some day but yeh... Anyway - it is responsive and buttons stay in place even for mobile. Text still may not fit for longer words ..

```auto
[{"id":"9dd7b41ce0ec03fa","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"BACK","order":12,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r6","icon":"reply","iconPosition":"left","payload":"/keypress/Back","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":280,"wires":[[]]},{"id":"bd222b701778924c","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"OFF","order":16,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r8","icon":"radio_button_unchecked","iconPosition":"left","payload":"/keypress/PowerOff","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":360,"wires":[[]]},{"id":"785654d45f31e5d1","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"ON","order":1,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r7","icon":"radio_button_checked","iconPosition":"left","payload":"/keypress/PowerOn","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":320,"wires":[[]]},{"id":"9582438227e5cd6b","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"HOME","order":10,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r6","icon":"home","iconPosition":"left","payload":"/keypress/Home","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":280,"wires":[[]]},{"id":"bc303a364dde909d","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"UP","order":17,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r1","icon":"arrow_upwards","iconPosition":"left","payload":"/keypress/Up","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":80,"wires":[[]]},{"id":"6ffb1903a343c911","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"RIGHT","order":13,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r2","icon":"arrow_forward","iconPosition":"left","payload":"/keypress/Right","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":620,"y":120,"wires":[[]]},{"id":"72cd2544549a3ea1","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"LEFT","order":15,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r2","icon":"arrow_back","iconPosition":"left","payload":"/keypress/Left","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":120,"wires":[[]]},{"id":"c6255cbb6e53a879","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"SELECT","order":14,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r2","icon":"keyboard_return","iconPosition":"left","payload":"/keypress/Select","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":440,"y":120,"wires":[[]]},{"id":"1ebcdbb37d4740e4","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"DOWN","order":11,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r3","icon":"arrow_downward","iconPosition":"left","payload":"/keypress/Down","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":440,"y":160,"wires":[[]]},{"id":"f50379fd2aee223a","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"REV","order":9,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r4","icon":"fast_rewind","iconPosition":"left","payload":"/keypress/Rev","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":200,"wires":[[]]},{"id":"0feedac8aea8ff3d","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"VOL +","order":2,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r7","icon":"volume_up","iconPosition":"left","payload":"/keypress/VolumeUp","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":320,"wires":[[]]},{"id":"7cdef30e3c417fdf","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"VOL -","order":3,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r8","icon":"volume_down","iconPosition":"left","payload":"/keypress/VolumeDown","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":360,"wires":[[]]},{"id":"de4c413a498c593c","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"MUTE","order":4,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r6","icon":"volume_off","iconPosition":"left","payload":"/keypress/VolumeMute","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":280,"wires":[[]]},{"id":"3290c691e7af60b2","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"PLAY/PAUSE","order":8,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r4","icon":"play_arrow","iconPosition":"left","payload":"/keypress/play","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":440,"y":200,"wires":[[]]},{"id":"5645abc1ace41c70","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"FWD","order":7,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r4","icon":"fast_forward","iconPosition":"left","payload":"/keypress/Fwd","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":200,"wires":[[]]},{"id":"6aba0a8f73239b5d","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"CH +","order":5,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r7","icon":"fast_forward","iconPosition":"left","payload":"/keypress/ChannelUp","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":320,"wires":[[]]},{"id":"b3da0a7a2f82cfd4","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"CH -","order":6,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r8","icon":"fast_forward","iconPosition":"left","payload":"/keypress/ChannelDown","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":360,"wires":[[]]},{"id":"9b1de296f3d53a64","type":"ui-template","z":"fcc7b2a2fdda30d4","group":"","page":"","ui":"f6017d9b9437205e","name":"","order":0,"width":0,"height":0,"head":"","format":"\n.c1 {\n grid-column:1/3 !important;\n}\n.c3 {\n grid-column: 3/5 !important;\n}\n.c5 {\n grid-column: 5/7 !important;\n}\n@media only screen and (max-width: 576px) {\n .c1 {\n grid-column:1/2 !important;\n}\n.c3 {\n grid-column: 2/3 !important;\n}\n.c5 {\n grid-column: 3/4 !important;\n}\n}\n.r1 {\n grid-row: 1 !important;\n}\n.r2 {\n grid-row: 2 !important;\n}\n.r3 {\n grid-row: 3 !important;\n}\n.r4 {\n grid-row: 4 !important;\n}\n.r5 {\n grid-row: 5 !important;\n}\n.r6 {\n grid-row: 6 !important;\n}\n.r7 {\n grid-row: 7 !important;\n}\n.r8 {\n grid-row: 8 !important;\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":420,"y":480,"wires":[[]]},{"id":"67172933099081b6","type":"ui-group","name":"Roku","page":"e3a1a003d3c5fd05","width":"6","height":"8","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"f6017d9b9437205e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"e3a1a003d3c5fd05","type":"ui-page","name":"AV Controls","ui":"f6017d9b9437205e","path":"/AV_Controls","icon":"home","layout":"grid","theme":"e4e51d0dcd1c0e6d","order":2,"className":"","visible":"true","disabled":"false"},{"id":"e4e51d0dcd1c0e6d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

You also need to change your icons. DB 2 uses material design icons so find those from here: [Material Design Icons - Icon Library - Pictogrammers](https://pictogrammers.com/library/mdi/)

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

Can explain everything, just ask specific questions..

---

<div class="post-metadata">

**Author:** ![kocherjj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kocherjj/32/20578_2.png) [@kocherjj](https://discourse.nodered.org/u/kocherjj)\
**Post date:** [14 September 2024 22:50 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/38 "2024-09-14T22:50:15Z")

</div>

As someone who works with compact user interfaces for control systems on a regular basis as part of my day job I would suggest going with 6 wide for mobile if a specific set of columns needs to be defined.

This allows full width, 1/2 width, and 1/3 width rectangular items as well as 1/6 width square items. In my experience having buttons wider than they are tall is generally helpful because labels require extra width, and making them square uses too much vertical screen real estate.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 September 2024 16:31 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/39 "2024-09-15T16:31:25Z")

</div>

> [@kocherjj](#):
>
> I would suggest going with 6 wide for mobile if a specific set of columns needs to be defined.

This was the original default, and we had too many complaints about widgets (sized 1 and 2, and particularly charts/gauges) rendering too small, so we modified it.

It'll be a fairly quick win to add this into a configuration, so i think we'll aim for that ASAP

---

<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:** [15 October 2024 16:31 UTC](https://discourse.nodered.org/t/the-shape-of-a-button/90853/40 "2024-10-15T16:31:38Z")

</div>

Closed on 15 October 2024 16:31 UTC

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

[Previous page](https://discourse.nodered.org/t/the-shape-of-a-button/90853.md?page=1)