# Change Dashboard css width

**URL:** <https://discourse.nodered.org/t/change-dashboard-css-width/12793>\
**Category:** FAQs\
**Created:** [1 July 2019 21:17 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793 "2019-07-01T21:17:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bdmfab](https://avatars.discourse-cdn.com/v4/letter/b/d78d45/32.png) [@bdmfab](https://discourse.nodered.org/u/bdmfab)\
**Post date:** [1 July 2019 21:17 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/1 "2019-07-01T21:17:37Z")

</div>

Hello All,

I would like to make my dashboard automatically resize to different screens. This portion of the dashboard is currently set to 6 width.This is taken from my browser using the dev tools.

`<div class="nr-dashboard-cardcontainer" id="Main_CNC_cards" ng-transclude="" ng-style="{width:ctrl.width, height:ctrl.height}" style="width: 318px; height: 804px;">`

I have used the dev tools to change this in the "element" heading but can't seem to figure out how to do this in the template. The **width: 318px** variable is what changes when I do this, I would like to make it 90 vw. I have tried this:

```auto
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<script>
    let container = document.getElementByid("Main_CNC_cards");
    container.style.width = 90vw;
</script>

```

This added the width = 90vw to the nr-dashboard-cardcontainer css but was superseded by the element portion which is still 318. Can I do this? Is there a better way?

![width](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1c94cbcd82453d6d1c1058ad174d0bbb703c15d3.png)

Thanks

---

<div class="post-metadata">

**Author:** ![bdmfab](https://avatars.discourse-cdn.com/v4/letter/b/d78d45/32.png) [@bdmfab](https://discourse.nodered.org/u/bdmfab)\
**Post date:** [2 July 2019 15:18 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/2 "2019-07-02T15:18:37Z")

</div>

For anyone else interested I solved this. Use a dashboard template and set it to the proper group. Instead of "Tab1\_Group1" I used "Main\_CNC" but it conveys the point. This allows auto horizontal scaling.

```auto
<style>
#Tab1_Group1 > div {
       width:90vw;
   }
   
  #Tab1_Group1 > div > p[style] {
      width:100% !important;
  }
  
   #Tab1_Group1_cards[style] {
      width:100% !important;
  }
  
  #Tab1_Group1_cards > md-card[style] {
       width:100% !important;
  }

</style>

```

---

<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:** [2 July 2019 16:14 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/3 "2019-07-02T16:14:37Z")

</div>

Nice one - if you don't mind I'll move this to the FAQ category as it's generally useful.

---

<div class="post-metadata">

**Author:** ![PastCoder](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pastcoder/32/52049_2.png) [@PastCoder](https://discourse.nodered.org/u/PastCoder)\
**Post date:** [5 December 2021 11:26 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/4 "2021-12-05T11:26:48Z")

</div>

Long time after this topic was solved 🙂

Is there a similar way for the height of a group? The reason is that I want to show a table, which is created dynamically (number of rows can vary). the number of row change only once per day, so that there is problem with flickering UI.

Edit: Maybe the scenario is a little different one because the widget itself needs to adjust to the number of rows to avoid avoidable scrollbars or avoidable empty space.

---

<div class="post-metadata">

**Author:** ![bernhardkurz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bernhardkurz/32/54126_2.png) [@bernhardkurz](https://discourse.nodered.org/u/bernhardkurz)\
**Post date:** [9 February 2022 08:35 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/5 "2022-02-09T08:35:34Z")

</div>

Hi @PastCoder,  
did you manage to solve the problem? i also need to set the height dynamically, not sure how to change  
`#Tab1_Group1 > div{ width:90vw; }`  
dynamically.

if you have found a solution maybe you could share....

thank you in advance

---

<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:** [9 February 2022 15:19 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/6 "2022-02-09T15:19:14Z")

</div>

Please raise as a new thread as not everyone will read an old thread about a different topic. Thanks.

---

<div class="post-metadata">

**Author:** ![abesis](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@abesis](https://discourse.nodered.org/u/abesis)\
**Post date:** [15 October 2022 09:05 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/7 "2022-10-15T09:05:46Z")

</div>

[https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2](https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2)

---

<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:** [15 October 2022 14:39 UTC](https://discourse.nodered.org/t/change-dashboard-css-width/12793/8 "2022-10-15T14:39:41Z")

</div>