DB2 Buttons size changes if over half grid

Dashboard
1

In DB2 I have some buttons with a fixed size of 1x1. Works great.
However if there are more buttons then will fit approximate half group size the buttons becomes smaller in size (visual and in cm). 41mm vs 36mm on my screen
The page is set as grid and the ui-group to 8x1.
Theme sizing is all default

Do I miss something or maybe a bug...

NR 4.01 - DB 1.12.2

Capture
Capture1260×97 1.01 KB

[{"id":"546cd23d19af96a8","type":"ui-button","z":"14ee7a67.002506","group":"12452f7391ca4e54","name":"","label":"Hello","order":13,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":570,"y":640,"wires":[[]]},{"id":"477cf5266f955bca","type":"ui-button","z":"14ee7a67.002506","group":"12452f7391ca4e54","name":"","label":"Hello","order":18,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":570,"y":680,"wires":[[]]},{"id":"c192b31cce5d6edb","type":"ui-button","z":"14ee7a67.002506","group":"12452f7391ca4e54","name":"","label":"Hello","order":17,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":570,"y":720,"wires":[[]]},{"id":"974bb94b06c4c4a3","type":"ui-button","z":"14ee7a67.002506","group":"12452f7391ca4e54","name":"","label":"Hello","order":14,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":570,"y":760,"wires":[[]]},{"id":"464e37d53e13e037","type":"ui-button","z":"14ee7a67.002506","group":"12452f7391ca4e54","name":"","label":"Hello","order":15,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":710,"y":640,"wires":[[]]},{"id":"47f4b87a04c7ebc6","type":"ui-button","z":"14ee7a67.002506","group":"12452f7391ca4e54","name":"","label":"Hello","order":16,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":710,"y":680,"wires":[[]]},{"id":"12452f7391ca4e54","type":"ui-group","name":"badkamer","page":"5e3c9ba48ca0c245","width":"8","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"5e3c9ba48ca0c245","type":"ui-page","name":"Charts Badkamer","ui":"d79157b360dc2a53","path":"/chartsbadkamer","icon":"home","layout":"grid","theme":"ab2f5ccdc429f731","order":2,"className":"","visible":"true","disabled":"false"},{"id":"d79157b360dc2a53","type":"ui-base","name":"Joshua Dashboard2","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"ab2f5ccdc429f731","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"}}]
2

Do you have an example of where they're sized differently please? Not sure I understand what the problem is?

Your group is set to size, 8, there are 6 buttons here, so I'd expect them to take up 6/8ths of the width, which they're doing?

3

Hi Joe,
Thanks for your prompt reply.

In the screenshot that is in my original post you can see that the 2 right buttons are smaller then the 4 left buttons. If it's hard to see use a ruler to measure them to make it visible.
The test code is also included in the original post.

Checked the buttons with the browser inspector and the left 4 buttons are 150x48, the right 2 buttons are 119,75x48 in size.

If you need more or other test code let me know.

4

Huh - yeah, I see that now. How odd. I'll investigate

5

Found the problem.
As always look at the whole picture and not only the problem. I thought the problem was in the buttons, but it's not.

On the same page I had Template node with some iframe code copied from DB1
In this iframe code was the line width:150px; Apparently this messes up the layout.
After removing this part of code everything works fine again, buttons have now all the same size.

6

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