Change Dashboard css width

FAQs
1

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:

<!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

Thanks

2

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.

<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>
7 Likes
3

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

4

Long time after this topic was solved :slight_smile:

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.

5

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

6

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

7

https://flows.nodered.org/flow/9ea2adb5cfc62abf5fc7d3dd021877d2