# Dashboard 2.0 Groups width and height with CSS

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [12 September 2024 23:40 UTC](https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924 "2024-09-12T23:40:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yjr77](https://avatars.discourse-cdn.com/v4/letter/y/7ea924/32.png) [@yjr77](https://discourse.nodered.org/u/yjr77)\
**Post date:** [12 September 2024 23:40 UTC](https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924/1 "2024-09-12T23:40:39Z")

</div>

With Dashboard 1.0 it was possible to resize a group with css by using the following code:  
'''  
my\_group\_name{  
width:12px;  
height : 23px;  
'''  
Under Dashboard 2.0 the same has not efffect

What is wrong please .

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 September 2024 08:23 UTC](https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924/2 "2024-09-13T08:23:23Z")

</div>

For starters, I imagine that should be

```css
#my_group_name {
   width:12px;
   height : 23px;
}

```

The leading `#` indicates an HTML ID. Or maybe it started with a `.` indicating a class name.

But use your browser's dev tools to find the group element and check whether it has an id and/or a class name.

---

<div class="post-metadata">

**Author:** ![yjr77](https://avatars.discourse-cdn.com/v4/letter/y/7ea924/32.png) [@yjr77](https://discourse.nodered.org/u/yjr77)\
**Post date:** [13 September 2024 14:27 UTC](https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924/3 "2024-09-13T14:27:22Z")

</div>

Thanks Julian,  
I has already test it like this.  
Do you have a short example for me?It will be appreciate.

Envoyé à partir de [Outlook pour Android](https://aka.ms/AAb9ysg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 September 2024 16:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924/4 "2024-09-13T16:52:24Z")

</div>

I don't really use either Dashboard as I'm the author of UIBUILDER which I personally find easier to use.

However, from my test D2, I tried to do it - I did get part way but things don't seem to work as I'd expect them to so I'm rather lost.

I configured a group like this:

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

Then added a ui template node like this

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

But it came out looking like this - which is not at all what I expected:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49e2f454fb64b71cca3e1d8fe0c291fd3784d176.png)

And that's because it seems to have applied the CSS in the wrong place:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/9/59c44d3e353bf861139247a2c710729db001daf4.png)

On the highlighted line instead of the next one down.

But even if I manually move it, the other issue is that not all styling will work anyway because some of the framework styling overwrites it. I ended up with this:

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

Because much of the class style was ignored but some wasn't:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e3c7efd76261b4d43c4e01ae9c91958d8a645cfb.png)

So that's as far as I've time to go I'm afraid. Clearly though, converting from D1 to D2 may not be as easy as simply copying the styles over.

* * *

Update: OK, so maybe not "the wrong place". But rather that there is an extra wrapping DIV that seems unnecessary to me.

If you take the `height` out of the CSS, then it does more of what you expect. If you try to set the height, only the wrapping div's height is alterered and not the content.

Either way, the width is ignored so you can't use this method to change the size. I kind of expected that though because you are using a CSS grid layout and the grid should have control of the element sizing.

* * *

By the way, this is why I don't use frameworks. They are a sledghammer to create a simple (to use, not simple behind the scenes) UI. BUT, if you want to then customise things, you often have to fight the framework, it no longer helps but rather hinders.

Trying to mix a complex framework with lots of customisation is, in my view, not a brilliant outcome.

---

<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:** [13 October 2024 16:52 UTC](https://discourse.nodered.org/t/dashboard-2-0-groups-width-and-height-with-css/90924/5 "2024-10-13T16:52:29Z")

</div>

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