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:
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.
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:
[
{
"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...
