# Autoscale in button group

**URL:** <https://discourse.nodered.org/t/autoscale-in-button-group/97632>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [15 June 2025 13:33 UTC](https://discourse.nodered.org/t/autoscale-in-button-group/97632 "2025-06-15T13:33:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jussie](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jussie](https://discourse.nodered.org/u/jussie)\
**Post date:** [15 June 2025 13:33 UTC](https://discourse.nodered.org/t/autoscale-in-button-group/97632/1 "2025-06-15T13:33:29Z")

</div>

hello everyone,  
i am working on a project with dashboard 2.0 and node red.  
I use a button group with fixed length and width but when I view this on another smaller screen, buttons fall off the screen and are no longer visible.

does anyone know if I can solve this with css? for example, that it scales automatically?  
Thanks in advance!

(big screen)  
 ![button group on normal screen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9bf1702d7cb7c00d325e9683b0efa73b7da1f87b.png)

(smaller screen)  
 ![button group on smaller screen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/a/6abe02257a4f9abbcb4bd59fec6377d21866b9f3.png)

code of button group:

```auto
[
    {
        "id": "5d2d822f972e8e40",
        "type": "ui-button-group",
        "z": "965a430273dfd2b1",
        "g": "980fc871993347ed",
        "name": "aems-ng",
        "group": "cdd6b68663695cb1",
        "order": 8,
        "width": "10",
        "height": "1",
        "label": "",
        "className": "",
        "rounded": true,
        "useThemeColors": true,
        "passthru": false,
        "options": [
            {
                "label": "open",
                "icon": "",
                "value": "0",
                "valueType": "num",
                "color": "#009933"
            },
            {
                "label": "1",
                "icon": "",
                "value": "8",
                "valueType": "num",
                "color": "#999999"
            },
            {
                "label": "2",
                "icon": "",
                "value": "16",
                "valueType": "num",
                "color": "#ff6666"
            },
            {
                "label": "3",
                "icon": "",
                "value": "24",
                "valueType": "num",
                "color": "#009999"
            },
            {
                "label": "4",
                "icon": "",
                "value": "32",
                "valueType": "num",
                "color": "#cccc00"
            },
            {
                "label": "5",
                "icon": "",
                "value": "40",
                "valueType": "num",
                "color": "#ff33cc"
            },
            {
                "label": "6",
                "icon": "",
                "value": "48",
                "valueType": "num",
                "color": "#cc6600"
            },
            {
                "label": "7",
                "icon": "",
                "value": "56",
                "valueType": "num",
                "color": "#99ff66"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 320,
        "y": 460,
        "wires": [
            [
                "d0eed0c78c8666fc"
            ]
        ]
    }
]

```

---

<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:** [15 June 2025 13:55 UTC](https://discourse.nodered.org/t/autoscale-in-button-group/97632/2 "2025-06-15T13:55:12Z")

</div>

What version of the dashboard do you have?

Are you using Firefox?  
A fix for this was [discussed in March](https://discourse.nodered.org/t/button-group-on-small-screen/95482)  
As far as I know no there's been no change to the dashboard to implement this by default.

---

<div class="post-metadata">

**Author:** ![jussie](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@jussie](https://discourse.nodered.org/u/jussie)\
**Post date:** [15 June 2025 14:09 UTC](https://discourse.nodered.org/t/autoscale-in-button-group/97632/3 "2025-06-15T14:09:01Z")

</div>

I have version 1.24. 2 and I do use Firefox, but it doesn't work well in Edge either.  
Could this also be because I have fixed the height and width?

---

<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:** [16 June 2025 12:29 UTC](https://discourse.nodered.org/t/autoscale-in-button-group/97632/4 "2025-06-16T12:29:17Z")

</div>

> [@jussie](#):
>
> Could this also be because I have fixed the height and width?

This is likely it, if you've set the height of the widget to be `1`, then it will fix to that height accordingly. If you change it to `auto`, then it will fit to it's content.

---

<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:** [5 July 2025 09:44 UTC](https://discourse.nodered.org/t/autoscale-in-button-group/97632/5 "2025-07-05T09:44:49Z")

</div>

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