# Ui-button size in DB2 question

**URL:** <https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [21 March 2025 09:15 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150 "2025-03-21T09:15:34Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [21 March 2025 09:15 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/1 "2025-03-21T09:15:34Z")

</div>

Hi All,

Does anyone know whether it is possible to set a 1x1 size for ui-button in dashboard-2?  
Setting the size to this value in the properties produces a 2x1 button on the dashboard for me.

Thanks for letting me know...

---

<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:** [21 March 2025 09:52 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/2 "2025-03-21T09:52:24Z")

</div>

Here's one of discussions about the shape of the button

> [@The shape of a button](https://discourse.nodered.org/t/the-shape-of-a-button/90853):
>
> Here are a few buttons, 3 with default styling and 3 with border-radius: 50% and colour changes. The button label shows what size it is - 1x1, 2x1 or 2x4. Perhaps foolishly, I expected a 1x1 or 2x2 button to be square, but it's rectangular. Why? Is there a way to configure the template so they will become square? If I try to make a button square by specifying 2 wide and 4 tall, it becomes almost square. Just sufficiently not square so that it looks wrong. On my browser, full screen …

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [21 March 2025 10:53 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/3 "2025-03-21T10:53:20Z")

</div>

Thanks for the link.

That's the current arrangement I have in DB1.

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

This is a group, with 8 widgets (4x ui-button, 2x ui-text, 2x ui-led) all sized at 1X1.

Based on the discussion, it looks like I cannot replicate this layout in DB2, correct?

I have seen we have a button group widget in DB2, which is closer, but I think requires a rewrite of the underlying flow, which I'd obviously like to avoid. I have over 40 of the suckers 🙂

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 March 2025 11:08 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/4 "2025-03-21T11:08:44Z")

</div>

Have you set the group width to two?

What does it look like?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 March 2025 12:02 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/5 "2025-03-21T12:02:32Z")

</div>

I think that you can _more or less_ replicate that layout using dashboard 2 button, led and text widgets and without any custom CSS

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

If your buttons _need_ to be square, there are some examples at [DB2 experiments on styling buttons](https://discourse.nodered.org/t/css-styling-ui-button-widgets-on-dashboard-2/)

I only briefly looked at the DB2 LED widget @flowfuse/node-red-dashboard-2-ui-led and decided to use a ui-template instead. This is described at [Interactive template LED designer](https://discourse.nodered.org/t/interactive-template-led-designer/92576/1).  
Unfortunately I didn't include options for LED placement in that demo.  
The basic LED widget has been enhanced since then; it looks somewhat better now.

> [@Mrb32](#):
>
> requires a rewrite of the underlying flow

Some degree of rewriting is probably inevitable for migrating to DB2.

> [@Mrb32](#):
>
> I have over 40 of the suckers 🙂

Maybe your best approach is to shun the default widgets and use a ui-template with text, buttons & LED elements and copy it 40 times

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [21 March 2025 12:31 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/6 "2025-03-21T12:31:55Z")

</div>

Thanks for the suggestions.

I had got as far as achieving the same layout as in your example, but I do need the stuff to be 1x1, so I can fit 10 groups in a row across the width of the dashboard on my iPad screen.

Of course, I am expecting an amount of work to be needed to migrate, just not a complete "rewrite". Rewrite is in quotes, because I cannot code, and do everything by connecting nodes/widgets and setting properties.

Styling or the use of Ui-template for the core feature of my dashboard is unfortunately out of my reach.

Thanks again for the input, I shall struggle on and try and find so form of workaround, it is still very early days on dashboard 2 for me, I need to get more familiar with it before choosing a path.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [21 March 2025 13:18 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/7 "2025-03-21T13:18:02Z")

</div>

> [@Mrb32](#):
>
> so I can fit 10 groups in a row across the width of the dashboard on my iPad screen.

That is a completely different issue. Edit the Page Settings for that page, check the Layout is set to Grid, and set the number of columns to 20 for all screen sizes. Then it should fit 10 groups of width two across the display.

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [21 March 2025 13:36 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/8 "2025-03-21T13:36:04Z")

</div>

Thanks! One step in the right direction 🙂

---

<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:** [4 April 2025 13:36 UTC](https://discourse.nodered.org/t/ui-button-size-in-db2-question/96150/9 "2025-04-04T13:36:53Z")

</div>

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