title: Pretty auto-layout of 2 ng-grids (master/detail) whose width changes based on content (CSS at runtime)
body: <p>A previous S.O question, <a href="https://stackoverflow.com/questions/17174096/is-there-a-way-to-auto-adjust-widths-in-ng-grid">is there a way to auto adjust widths in ng-grid?</a> describes how to automatically adjust the width of an ng-grid by adjusting the width of each column to fit the longest data in any row of that column.</p>
  
  <p>I want to do that based on JSON data received periodically from a server, which means that the grid's contents and, therefor, width will change from time to time. The referenced solution should handle that.</p>
  
  <p>However, I have 2 grids (master/detail) which I will to display side by side on the page.</p>
  
  <pre><code>+------------+      +-----------+
  | master     |      | detail    |
  +------------+      +--------- -+
  | customer 1 |      | Order 1,a |
  +------------+      +-----------+
  | customer 2 |      | Order 1,b | 
  +------------+      +-----------+
  | customer 3 |      
  +------------+      
  </code></pre>
  
  <p>something like that.</p>
  
  <p>The problem is that I would like to lay them out prettily on the web page. Let's say an equal sized left &amp; right margin, so the the grids don't hot the side of the page, but are indented a little. Then out the grids in the centre, with some space between them.</p>
  
  <p>Perhaps the centres of the grids, regardless of width could be at 25% and 75% of the page respectively (or 30% and 70%, etc)  </p>
  
  <pre><code>--------------------------------------------
  |                                          |
  |      +---+             +_____________+   |
  |      |   |             |             |   |
  |      +---+             +_____________+   |
  |                                          |
  --------------------------------------------
  </code></pre>
  
  <p>I can work out the aesthetics &amp; the mathematics of it, although questions are welcome.</p>
  
  <p>I am sure that I am not the first to do something like this. My question is how?</p>
  
  <p>I am thinking that I may have to naughty and put <code>style="width:{{masterGridthWidth}}</code> type inline CSS directly into my HTML and have something like<code>ng-style="getMasterGridthWidth()"</code> on the element, to allow me to effectively generate CSS at run-time. </p>
  
  <p>Is this even possible (I don't think that<code>ng-class</code> would help)? Is there a better way to do it?</p>
  
  <hr>
  
  <p>[Update] I agree with  @MichalCharemza that 1) it's best to use a pure CSS fix if I can, rather than involving JS, and 2) fixed width grids would be a better UX.</p>
  
  <p>My problem is that the first two grids are both full screen width, appearing above each other, rather than side by side.</p>
  
  <p>Where are these widths of 1198px coming from (it looks like the official ng-grid.css), and how can I override them? I tried adding `style="width:25%" in my partial. I even wrapped the grid in another DIV with width 25%, to no avail.</p>
  
  <p>I am stuck :-(</p>
  
  <pre><code>&lt;div class="ngTopPanel ng-scope" ng-class="{'ui-widget-header':jqueryUITheme, 'ui-corner-top': jqueryUITheme}" ng-style="topPanelStyle()" style="width: 1198px; height: 45px;"&gt;
      &lt;div class="ngGroupPanel ng-hide" ng-show="showGroupPanel()" ng-style="groupPanelStyle()" style="width: 1198px; height: 32px;"&gt;
          &lt;div class="ngGroupPanelDescription ng-binding" ng-show="configGroups.length == 0"&gt;Drag a column header here and drop it to group by that column.&lt;/div&gt;
          &lt;ul ng-show="configGroups.length &gt; 0" class="ngGroupList ng-hide"&gt;
              &lt;!-- ngRepeat: group in configGroups --&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 1198px; height: 45px;"&gt;
          &lt;div ng-header-row="" class="ngHeaderScroller" ng-style="headerScrollerStyle()" style="height: 45px;"&gt;&lt;!-- ngRepeat: col in renderedColumns --&gt;&lt;div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell ng-scope col0 colt0"&gt;
      &lt;div class="ngVerticalBar" ng-style="{height: col.headerRowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div ng-header-cell=""&gt;&lt;div class="ngHeaderSortColumn  ngSorted" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !col.noSortVisible() }" draggable="true" style="cursor: pointer;"&gt;
      &lt;div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText ng-binding colt0"&gt;Vehicle type&lt;/div&gt;
      &lt;div class="ngSortButtonDown ng-hide" ng-click="col.sort($event)" ng-show="col.showSortButtonDown()"&gt;&lt;/div&gt;
      &lt;div class="ngSortButtonUp" ng-click="col.sort($event)" ng-show="col.showSortButtonUp()"&gt;&lt;/div&gt;
      &lt;div class="ngSortPriority ng-binding"&gt;&lt;/div&gt;
      &lt;div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable" class="ng-hide ngUnPinnedIcon"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div ng-show="col.resizable" class="ngHeaderGrip ng-scope ng-hide" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- end ngRepeat: col in renderedColumns --&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div ng-grid-menu=""&gt;&lt;div ng-show="showColumnMenu || showFilter" class="ngHeaderButton ng-scope ng-hide" ng-click="toggleShowMenu()"&gt;
      &lt;div class="ngHeaderButtonArrow"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div ng-show="showMenu" class="ngColMenu ng-scope ng-hide"&gt;
      &lt;div ng-show="showFilter" class="ng-hide"&gt;
          &lt;input placeholder="Search..." type="text" ng-model="filterOptions.filterText" class="ng-pristine ng-valid"&gt;
      &lt;/div&gt;
      &lt;div ng-show="showColumnMenu" class="ng-hide"&gt;
          &lt;span class="ngMenuText ng-binding"&gt;Choose Columns:&lt;/span&gt;
          &lt;ul class="ngColList"&gt;
              &lt;!-- ngRepeat: col in columns | ngColumns --&gt;&lt;li class="ngColListItem ng-scope" ng-repeat="col in columns | ngColumns"&gt;
                  &lt;label class="ng-binding"&gt;&lt;input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox ng-pristine ng-valid" ng-model="col.visible"&gt;Vehicle type&lt;/label&gt;
                  &lt;a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable &amp;amp;&amp;amp; col.visible" ng-click="groupBy(col)" class="ngGroupIcon"&gt;&lt;/a&gt;
                  &lt;span class="ngGroupingNumber ng-binding ng-hide" ng-show="col.groupIndex &gt; 0"&gt;0&lt;/span&gt;          
              &lt;/li&gt;&lt;!-- end ngRepeat: col in columns | ngColumns --&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>