Change Dashboard css width

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>
<meta charset="UTF-8">
    let container = document.getElementByid("Main_CNC_cards"); = 90vw;

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?



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.

#Tab1_Group1 > div {
  #Tab1_Group1 > div > p[style] {
      width:100% !important;
   #Tab1_Group1_cards[style] {
      width:100% !important;
  #Tab1_Group1_cards > md-card[style] {
       width:100% !important;


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