FlowFuse / FlowFuse/node-red-dashboard

Widget size varies with group width

Open
#1,891 9 comments 0 reactions 0 assignees View on GitHub
needs-triage type:bug
Dominant language
HTML
Stars
355
Forks
82
Avg merge
4d 23h
Merged PRs (30d)
24

Description

### Current Behavior

The size of widgets varies with the width of the containing group. For example here are six 1x1 buttons in a group of width 6 and two buttons in a group of width 2.

Image

The buttons in the second group are narrower than in the first.
The bug appears to lie in the calculation of group width. A group of width n should allow room for n widgets, n-1 inter-widget gaps, and 2 border gaps at the sides. Currently it appears to only allow for 1 border gap so the widgets have to be shrunk to fit in.

Does anyone know where the code that sizes the group is?

### Expected Behavior

_No response_

### Steps To Reproduce

Import this flow and if necessary reduce the window width so the groups lie above each other. This does not affect the issue but makes it easier to see.

```
[{"id":"708fb2e61d38b271","type":"group","z":"997da33a0beedade","name":"Button Width Test","style":{"label":true},"nodes":["bafbd196632d4d9f","4698f660c113e1f3","8fdb7f4e8a8cc6c5","9e35f17b19b7fd0b","adbfdc33663e1abb","82272e556a61cd32","eb3f9d0e95d20745","e7e9e4875d859fb1"],"x":234,"y":4159,"w":832,"h":142},{"id":"bafbd196632d4d9f","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","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":310,"y":4200,"wires":[[]]},{"id":"4698f660c113e1f3","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","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":750,"y":4200,"wires":[[]]},{"id":"8fdb7f4e8a8cc6c5","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","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":610,"y":4200,"wires":[[]]},{"id":"9e35f17b19b7fd0b","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","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":470,"y":4200,"wires":[[]]},{"id":"adbfdc33663e1abb","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","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":870,"y":4200,"wires":[[]]},{"id":"82272e556a61cd32","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f61ab9f04574e6e5","name":"","label":"button","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":310,"y":4260,"wires":[[]]},{"id":"eb3f9d0e95d20745","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f4cd34922b93a93a","name":"","label":"button","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":990,"y":4200,"wires":[[]]},{"id":"e7e9e4875d859fb1","type":"ui-button","z":"997da33a0beedade","g":"708fb2e61d38b271","group":"f61ab9f04574e6e5","name":"","label":"button","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":470,"y":4260,"wires":[[]]},{"id":"f4cd34922b93a93a","type":"ui-group","name":"6x1","page":"94740f3451825304","width":"6","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"f61ab9f04574e6e5","type":"ui-group","name":"2x1","page":"94740f3451825304","width":"2","height":1,"order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"94740f3451825304","type":"ui-page","name":"group width test","ui":"ID-BASE-1","path":"/group_width","icon":"home","layout":"grid","theme":"c4cba76c368d7996","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c4cba76c368d7996","type":"ui-theme","name":"Test theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"616b43494b331658","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]
```

### Environment

- Dashboard version:
- Node-RED version:
- Node.js version:
- npm version:
- Platform/OS:
- Browser:

### Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.