# Problem with groups lining up

**URL:** <https://discourse.nodered.org/t/problem-with-groups-lining-up/20817>\
**Category:** Dashboard\
**Created:** [24 January 2020 18:16 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817 "2020-01-24T18:16:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [24 January 2020 18:16 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/1 "2020-01-24T18:16:19Z")

</div>

I was looking and from what I can see is that in the dashboard coding there are a few pixel sizing constraints that use an odd number of pixels when everything is affecting resizing based on even multiples. So We need to identify the pixel sizes and change them to even number of pixels over the odd ones.

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

If you look on the right side of graphs you can see I cant get them to line up no mater how I fix the group sizes.

---

<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:** [24 January 2020 18:31 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/2 "2020-01-24T18:31:17Z")

</div>

How the sizes are configured for dashboard layout?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7487e80cb36c5c146cef8aef3be355755d2f833b.png)

Also I see you have browser zoom not in 100%. Not sure if it affects anything but for clean start  
ellminate possible side effects first.

---

<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:** [24 January 2020 19:18 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/3 "2020-01-24T19:18:37Z")

</div>

If you want to do such layout with differently sized cards, the sizes must be mathematically suitable to fulfill the area. Do the math first. (Do not forget about the gaps). Then try if layout fits. .

---

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [24 January 2020 20:12 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/4 "2020-01-24T20:12:22Z")

</div>

I am using the smaller setup to maximize size and the window is full scream

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

---

<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:** [24 January 2020 20:27 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/5 "2020-01-24T20:27:08Z")

</div>

Doesn't tell much as we still don't know sizes of every card. I'm still with my previous advise. Do the math first. Or if math doesn't help, take Excel and adjust the grid according to your layout sizes (do not forget about gaps), colorize cards on it and figure out layout sizes and then apply to each element on dashboard.

I doubt, the smaller sizes makes any good for layout. You have screen size big enough to use standard or near standard values.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [24 January 2020 20:57 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/6 "2020-01-24T20:57:01Z")

</div>

yes - small sizes start to have other problems where the minimum sizes of items force things to be bigger than they want to be. Not sure what the limits are as it can depend on other things like font size and style, options in node, etc.  
But yes the maths is hard.

---

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [27 January 2020 00:39 UTC](https://discourse.nodered.org/t/problem-with-groups-lining-up/20817/7 "2020-01-27T00:39:25Z")

</div>

But after looking at the code it looks as if most are multiples of 2 and the few that are messing up are odd. I am speaking about the card pixel counts. The one I am having problems with is set to 31 px