CODEWITHSUNDEEP
angularjsangular-ui-bootstrapng-grid
Mag703
Mag703

Reputation: 35

How to have ng-grid extended to the full width when it's created hidden?

I find that when a ng-grid is inside an accordion and is initialized with the accordion closed, the width of the ng-grid header and rows are set to a fixed 100px, instead of extending to the full width of the table.

I created a plunker: http://plnkr.co/edit/9GRli7qtg65NKNZOz3vh?p=preview

The accordion is set to be closed by default, expand it and see the table is squeezed to the left. Change '$scope.isopen' to true in the controller and see when ng-grid is not hidden when initialized, the width is fine.

Is this a bug? Any way to easily work around it?

Upvotes: 2

Views: 1307

Answers (1)

Alex Choroshin
Alex Choroshin

Reputation: 6187

it's probaby a bug but according to this stackoverflow answer, there's a workaround. The width is adjusted as soon as you resize the window, so you need to trigger the resize event using the ng-click in the accordion directive.

Example:

controller:

$scope.resizer=function(){
      $(window).trigger('resize');
    }

html:

  <accordion ng-click="resizer()">
    <accordion-group heading="Grid" is-open="isopen">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </accordion-group>
  </accordion>

Live example: http://plnkr.co/edit/ohRDzj25R7rn1YiUbPjF?p=preview

Upvotes: 4

Related Questions