title: grid view for a widger in angular material
body: <p>I am trying to set up a grid view for a widget I'm building with angular matirial.</p>
  
  <p>Basically I want a side bar with fixed width on the left, and on the right the content with three sections in a column: a header with fixed height (60px), a content which should fill the widget, and a footer with fixed height (60px);</p>
  
  <p>Here is a plunker I have setup.
  <a href="http://plnkr.co/edit/RkvUOsJrs7hjez4MTyk3?p=preview" rel="nofollow">Plunker</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="main"&gt;
  
    &lt;head&gt;
  
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  
  
      &lt;link rel="stylesheet" href="style.css" /&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div id="widget" class="widget-container box-shadow"&gt;
              &lt;div layout="row" layout-fill flex&gt;
                  &lt;div class="my-main" layot="column" layout-fill flex&gt;
                      &lt;div class="my-header" &gt;&lt;/div&gt;
                      &lt;div class="my-content" flex&gt;&lt;/div&gt;
                      &lt;div class="my-footer" &gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="my-sidebar" layot="column" &gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;!-- Angular Material Dependencies --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- Angular Material Javascript now available via Google CDN; version 0.10 used here --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>*{
      direction: rtl;
  }
  
  .widget-container{
      position: absolute;
      top:20%;
      left: 30%;
      width: 40%;
      height: 40%;
  }
  
  .box-shadow{
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  }
  
  .my-main{
      width: 100%;
  }
  .my-header{
      background-color: brown;
      width:60px;
  }
  
  .my-content{
  
      background-color: blue;
  }
  
  .my-footer{
      background-color: chartreuse;
      width:60px;
  }
  
  .my-sidebar{
      width: 60px;
      background-color: aqua;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module("main", ["ngMaterial"]);
  
  angular.module("main")
      .run(function (){
  
          $("#widget").draggable();
          $("#widget").resizable();       
  
      });
  </code></pre>
  
  <p>Right now my content view does not appear at all (width of 0). I think I am missing something with angular material, but what?
  Also I added draggable and resizable options from jquery-ui but I dont think that is the problem.</p>
  
  <p>Thanks for the help.</p>
  
  <p>Edit 1:
  Just a typo, the plunker is fixed and working, hope it would help someone.</p>