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

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

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