# Align widgets in DB2?

**URL:** <https://discourse.nodered.org/t/align-widgets-in-db2/86096>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [3 March 2024 16:00 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096 "2024-03-03T16:00:29Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanderson](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@sanderson](https://discourse.nodered.org/u/sanderson)\
**Post date:** [3 March 2024 16:00 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/1 "2024-03-03T16:00:29Z")

</div>

I am trying to vertically align three ui-text widgets, and place a gauge next to them. However, I cant seem to get it to work (see picture). The text is divided into two columns, and the gauge added to the second column. Is there a layout mode in DB2? Is there a way to suggest the alignment I want? Thanks!

 ![Screenshot 2024-03-03 at 8.58.19 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/04b3d13414c323cffba4980595ed7be59864a524.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [3 March 2024 16:03 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/2 "2024-03-03T16:03:09Z")

</div>

There are some issues with Gauge sizing atm in that it ignores the height. Fix hopefully coming in the next release!

---

<div class="post-metadata">

**Author:** ![sanderson](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@sanderson](https://discourse.nodered.org/u/sanderson)\
**Post date:** [3 March 2024 16:07 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/3 "2024-03-03T16:07:54Z")

</div>

Joe - thanks for the answer in \< 2 minutes! So I am guessing there is little point in guessing solutions using combinations of either widget sizes, or alternately the arcane (but surely lovely) art of vuetify "layout managers"? Thanks again!

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [3 March 2024 16:15 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/4 "2024-03-03T16:15:33Z")

</div>

Give me a qeek, and it should make your life a lot easier.

Gauge minimum height is fixed at 150px atm (which is roughly a height of "3"), so trying to make something match, you're better off making the text/labels match, than adjusting the gauge

---

<div class="post-metadata">

**Author:** ![sanderson](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@sanderson](https://discourse.nodered.org/u/sanderson)\
**Post date:** [3 March 2024 18:31 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/5 "2024-03-03T18:31:54Z")

</div>

Will do! Thanks!

---

<div class="post-metadata">

**Author:** ![sanderson](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@sanderson](https://discourse.nodered.org/u/sanderson)\
**Post date:** [16 March 2024 22:19 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/6 "2024-03-16T22:19:35Z")

</div>

Just a ping to see if anything new has happened. I have updated to v1.4.0, but things still look the same. And thanks!

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [17 March 2024 09:20 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/7 "2024-03-17T09:20:11Z")

</div>

I did push the improvements, yes.

You should now be able to configure the height/size of the gauge to be a specific number of rows tall.

You're likely still seeing the same behaviour as when you've got a gauge with `auto` size, then I resort to setting height manually so it renders _something_

---

<div class="post-metadata">

**Author:** ![sanderson](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@sanderson](https://discourse.nodered.org/u/sanderson)\
**Post date:** [17 March 2024 17:48 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/8 "2024-03-17T17:48:03Z")

</div>

Hi Joe -

Thank you! Is there a way to show three text values in a vertical alignment, with a gauge to the right of them?

3x1 Text

3x1 Text 3x3 Guage

3x1 Text

Like this?

I can’t quite figure out how to align objects, like I could with the layout options in DB 1.

A huge thanks,

Scott

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [17 March 2024 18:15 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/9 "2024-03-17T18:15:33Z")

</div>

I would have 2 groups:

Group 1 (Width: 3) - contains the 3 x text widgets  
Group 2 (Width: 3) - contains the gauge

The layout options do have limitations at the moment, my priority this week is onboarding (code mostly written just waiting on some reviews and tests). After that, my focus will be on improving Dashboard layouts

---

<div class="post-metadata">

**Author:** ![sanderson](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@sanderson](https://discourse.nodered.org/u/sanderson)\
**Post date:** [21 March 2024 20:35 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/10 "2024-03-21T20:35:02Z")

</div>

Thanks Joe!

---

<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:** [20 April 2024 20:35 UTC](https://discourse.nodered.org/t/align-widgets-in-db2/86096/11 "2024-04-20T20:35:59Z")

</div>

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