Search code examples
javascriptangularjsangular-uing-gridangular-ui-grid

ui-grid (ng-grid) calculated width is too wide

I have a dashboard with a sidebar. I am trying to use ui-grid in the main part (called dynamic-content) Here is my html:

<div class="dynamic-content col-lg-12">
<div id="account-grid" ui-grid="accountsVM.gridOptions" class="grid"></div>
</div>

The grid is showing up and rendering what I expect but the problem is that it is expanding (width-wise) well out of the bounds of the page causing a scrollbar to appear so that the entire grid can be viewed. I suspect that it is calculating its width based on the entire page width rather than based on its parent div. How can I deal with this?

Thanks in advance.

Solution

  • You may need a css class to set the width of the grid:

    .grid {
  width: 500px;
  height: 400px;
}

    And, if this is not fixed, the auto-resize feature will enable the grid to resize itself when its container changes size.