# Tweaking the Dashboards for non-matched group sizes

**URL:** https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222
**Category:** Feature Requests
**Created:** [11 August 2018 09:14 UTC](https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222 "2018-08-11T09:14:41Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 August 2018 09:14 UTC](https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222/1 "2018-08-11T09:14:41Z")

</div>

The default settings for the "widgets" (buttons?) in the SITE part.

There are settings for the 1x1 widget,  
Widget spacing,  
Group spacing,  
Group padding.

If "you" edit the size of some/any of these, it can cause alignment problems with groups.

Is there an easy (any?) way of adjusting for the misalignment of the adjacent groups?

I would send a picture/screen shot, but my dashboard is "work in progress" just now with some new things, so the problem isn't there.

---

<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: [11 August 2018 09:24 UTC](https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222/2 "2018-08-11T09:24:50Z")

</div>

no - you just have to play with the spacings until you get it right.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 August 2018 09:37 UTC](https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222/3 "2018-08-11T09:37:21Z")

</div>

But the spacing is for the entire page - right?

In my example (which you can't see just now) I have three TEXT nodes and a TOGGLE node.  
The settings are pulled back to as close as possible to small.

42 pixles for widget size,  
2 for spacing  
Group padding is 0  
and group spacing is 2

Beside that is a group and when shown there is a big enough difference in their height it is not nice.

Any groups which wrap around from the end of the screen are bumped because of the size difference.

So I see that as a possible problem for people in the future (as it will be for me) because of the different vertical sizes.

_IF_ interested, I can send in a screen grab once this other project is completed.

Bah, here it is.  
Though only in part.  
 ![Screenshot%20from%202018-08-11%2019-41-19](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/29b7870caf0de7ede9daa71c8435e05a2617ce50.png)

---

<div class="post-metadata">

### Author: ![Unpuertomex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/unpuertomex/32/655_2.png) [@Unpuertomex](https://discourse.nodered.org/u/Unpuertomex)
#### Post date: [11 August 2018 18:54 UTC](https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222/4 "2018-08-11T18:54:09Z")

</div>

> [@Trying\_to\_learn](#):
>
> bumped because of the size difference

One of way to resolve this is using CSS to control the height and width of the group. For example, I have a tab titled Dashboard with a group called Light, using the ui\_template I modify the height using CSS like this

```auto
<style>  
#Dashboard_Lights {
    height:400px; 
}
</style>

hope this it helps.
```

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [12 August 2018 01:09 UTC](https://discourse.nodered.org/t/tweaking-the-dashboards-for-non-matched-group-sizes/2222/5 "2018-08-12T01:09:19Z")

</div>

It does help, I am only "putting it on the table" because many new people (like me) don't have these tricks up their sleeves.

When they are designing a web page, they want a .... (can't think of the RIGHT word) easy? way to do it. I don't want to confuse easy and simple.

Rather than having to get a TEMPLATE node and add CSS - which could be beyond them - have a NODE that adds padding and all you do is add the size?

Just a thought.

Yes, I admit that is (basically) what you said, but again: rather than having to get the TEMPLATE node, there is an easier way.
