# Groups alignment

**URL:** <https://discourse.nodered.org/t/groups-alignment/96311>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [28 March 2025 11:45 UTC](https://discourse.nodered.org/t/groups-alignment/96311 "2025-03-28T11:45:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 11:45 UTC](https://discourse.nodered.org/t/groups-alignment/96311/1 "2025-03-28T11:45:09Z")

</div>

It's not really nice...

 ![risc](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99d969668f4b1146b4fa03ed3b54c720cc263da7.png)

How to solve?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [28 March 2025 12:02 UTC](https://discourse.nodered.org/t/groups-alignment/96311/2 "2025-03-28T12:02:23Z")

</div>

> [@Giamma](#):
>
> How to solve?

You could add a class to the group and set its height

### group settings

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

### ui-template for CSS

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

_EDIT_  
Correct spelling of **height** is entirely optional 😉

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 12:34 UTC](https://discourse.nodered.org/t/groups-alignment/96311/3 "2025-03-28T12:34:01Z")

</div>

Don't work and I don't understand where where am I wrong ...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [28 March 2025 12:36 UTC](https://discourse.nodered.org/t/groups-alignment/96311/4 "2025-03-28T12:36:48Z")

</div>

Works for me.

I'm afraid I cannot help you if you dont show what you did.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 12:40 UTC](https://discourse.nodered.org/t/groups-alignment/96311/5 "2025-03-28T12:40:15Z")

</div>

I did this...

 ![class](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bfbca168e28cfb0c8c1ecd8d4efc254f2d40b297.png)

 ![group](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a81da648dcbb14daa91b2486e570c72d5e6d5290.png)

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 12:49 UTC](https://discourse.nodered.org/t/groups-alignment/96311/6 "2025-03-28T12:49:25Z")

</div>

The class name must be update in the page and in every groups?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [28 March 2025 12:54 UTC](https://discourse.nodered.org/t/groups-alignment/96311/7 "2025-03-28T12:54:08Z")

</div>

> [@Giamma](#):
>
> class name must be update in the page and in every groups

Only the short group. Note however, if the longer group is being _made bigger_ due to its internal widgets forcing it to be bigger, it might not work!

Try setting the class name on the 2 groups you are trying to align & set the CSS value to `600px !important` - do they both size up to 600px?

Try also inspecting the elements in your devtools to see why it isnt applied.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 13:33 UTC](https://discourse.nodered.org/t/groups-alignment/96311/8 "2025-03-28T13:33:49Z")

</div>

I reduced the size of labels and now the group are almost alignment (without class) and for now I'm ok.  
Thanks for the help...

EDIT: I added two gauge and now I have the groups out of alignment again ...

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 14:48 UTC](https://discourse.nodered.org/t/groups-alignment/96311/9 "2025-03-28T14:48:38Z")

</div>

Is possible to have a class that allow to set the widget gap for every group?

---

<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:** [27 April 2025 14:48 UTC](https://discourse.nodered.org/t/groups-alignment/96311/10 "2025-04-27T14:48:39Z")

</div>

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