title: UI-Grid does not take 100% width on page load
body: <p>I am using ui-grid to showing data in table. when i load the page and leave for few second and then click on the tab (which containing ui-grid), the ui-grid css break. it does not show width of ui-grid 100% of container.but when i load page and just click on tab (containg ui-grid). ui-grid is showing perfect, i mean width of that is 100% of container. I don't know what is the problem.this is the code, i am working on :</p>
  <p><strong>Js:</strong></p>
  <pre><code>$scope.gridOptions= {
              enableFiltering: true,
              enableGridMenu : true,
              enableRowSelection: true,
              enableSelectAll: true,
  
              selectionRowHeaderWidth: 50,
              // rowHeight: 35,
              // infiniteScrollRowsFromEnd: 50,
              // infiniteScrollUp: true,
              infiniteScrollDown: true,
              columnDefs : [
                { displayName:&quot;Attribute&quot;,field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
                { displayName:&quot;Section&quot;,field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
                { displayName:&quot;Type&quot;,field: 'types',filter: { placeholder: 'Search Types'} }
              ]
  }
  </code></pre>
  <p><strong>Html:</strong></p>
  <pre><code>&lt;div class=&quot;grid m-b-20&quot; ui-grid=&quot;gridOptions&quot; ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Note:</strong> <em>ui-grid is inside Angular bootstrap Tab</em></p>
  <p>and here is the snapshot of collapse grid :</p>
  <p><img src="https://i.stack.imgur.com/Ff3IR.png" alt="enter image description here" /></p>