# DB2 layout issues with button group (fka multiswitch)

**URL:** <https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [16 February 2025 00:40 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436 "2025-02-16T00:40:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [16 February 2025 00:40 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/1 "2025-02-16T00:40:15Z")

</div>

Hi all,

how come that my 6 item button group does not fit on my smartphone screen whereas 6 individual buttons next to each other easily do. Below is a screenshot from my smartphone situation:

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

And now a screenshot from my pc browser (narrowed down as much as possible). In that view the button group is even less wide if compared to the 6 individual buttons.

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

I've tested several responsive layouts, but all these settings are less intuitive for me. May I ask for your support ? I just would like to bring this 6 item button group to my smartphone screen wihtout being splitted. Here is the respective flow:

```auto
[
    {
        "id": "0fd1b746eecbd9c1",
        "type": "ui-button-group",
        "z": "7845132b7bdf9787",
        "name": "",
        "group": "86dab89321d6876e",
        "order": 1,
        "width": "6",
        "height": "1",
        "label": "",
        "className": "",
        "rounded": true,
        "useThemeColors": true,
        "passthru": false,
        "options": [
            {
                "label": "1",
                "icon": "",
                "value": "option_0",
                "valueType": "str",
                "color": "#009933"
            },
            {
                "label": "2",
                "icon": "",
                "value": "option_1",
                "valueType": "str",
                "color": "#999999"
            },
            {
                "label": "3",
                "icon": "",
                "value": "option_2",
                "valueType": "str",
                "color": "#ff6666"
            },
            {
                "label": "4",
                "icon": "",
                "value": "option_3",
                "valueType": "str",
                "color": "#009999"
            },
            {
                "label": "5",
                "icon": "",
                "value": "option_4",
                "valueType": "str",
                "color": "#cccc00"
            },
            {
                "label": "6",
                "icon": "",
                "value": "option_5",
                "valueType": "str",
                "color": "#ff33cc"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 770,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "b8e016ef8db2c878",
        "type": "ui-button",
        "z": "7845132b7bdf9787",
        "group": "3bd1e2563e944e24",
        "name": "",
        "label": "b",
        "order": 1,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 940,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "b5172c40be764cae",
        "type": "ui-button",
        "z": "7845132b7bdf9787",
        "group": "3bd1e2563e944e24",
        "name": "",
        "label": "b",
        "order": 6,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 1060,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "3aa8f0f9509ee406",
        "type": "ui-button",
        "z": "7845132b7bdf9787",
        "group": "3bd1e2563e944e24",
        "name": "",
        "label": "b",
        "order": 2,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 1180,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "090e2e7c98f86819",
        "type": "ui-button",
        "z": "7845132b7bdf9787",
        "group": "3bd1e2563e944e24",
        "name": "",
        "label": "b",
        "order": 3,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 1300,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "0fef1c391457acb7",
        "type": "ui-button",
        "z": "7845132b7bdf9787",
        "group": "3bd1e2563e944e24",
        "name": "",
        "label": "b",
        "order": 4,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 1420,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "35d8ea63980128c0",
        "type": "ui-button",
        "z": "7845132b7bdf9787",
        "group": "3bd1e2563e944e24",
        "name": "",
        "label": "b",
        "order": 5,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 1550,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "86dab89321d6876e",
        "type": "ui-group",
        "name": "multiswitch",
        "page": "8118848785e7a330",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "3bd1e2563e944e24",
        "type": "ui-group",
        "name": "6Buttons",
        "page": "8118848785e7a330",
        "width": "6",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "8118848785e7a330",
        "type": "ui-page",
        "name": "Colors2",
        "ui": "14a551a96b61dade",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "acc4d7417e8a63c7",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "6"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "6"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "14a551a96b61dade",
        "type": "ui-base",
        "name": "My Dashboard 2 Next Level",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true
    },
    {
        "id": "acc4d7417e8a63c7",
        "type": "ui-theme",
        "name": "STD_THEME",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "0px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "4px"
        }
    }
]

```

Thanks in advance...

---

<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:** [16 February 2025 11:07 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/2 "2025-02-16T11:07:56Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 February 2025 11:40 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/3 "2025-02-16T11:40:26Z")

</div>

The node does not seem to respond correctly to the size setting. Possibly you should submit an issue against the node.

---

<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:** [16 February 2025 11:51 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/4 "2025-02-16T11:51:26Z")

</div>

It does. It fits until it wraps cos where do you draw the line. How much buttons must fit before wrapping should affect. As the content of the button also drive the internal sizing, the count of elements is not an option anyhow.

There's no way to satisfy all wishes with this kind of widget. Only one thing is left and that is the css override. Yes. A bit of knowledge or understanding needed.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 February 2025 12:10 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/5 "2025-02-16T12:10:17Z")

</div>

If it is sized as 6x1 then should it not fill a group sized as 6 wide? Otherwise I don't know what the size specification means.

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [16 February 2025 12:32 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/6 "2025-02-16T12:32:12Z")

</div>

You are fantastic! Such a simple solution. I will include this as standard...

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [16 February 2025 12:33 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/7 "2025-02-16T12:33:38Z")

</div>

This is exactly what irritates me. I was of the opinion that I got the idea of the responsive layouts wrong...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 February 2025 15:35 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/8 "2025-02-16T15:35:06Z")

</div>

You shouldn't be too irritated. Remember someone has put time and effort into developing this, at no cost to you or me.

---

<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:** [2 March 2025 15:35 UTC](https://discourse.nodered.org/t/db2-layout-issues-with-button-group-fka-multiswitch/95436/9 "2025-03-02T15:35:59Z")

</div>

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