ui.boostrap accordion container width issue

Question

THIS PLUNKER REFERS

I\'m having an issue using ng-Grid inside a ui.bootstrap accordion. Take a look at my Plunker to see the issue in action.

Essentially, wh

Answer 1

Hmm, that's strange because it works perfectly on firefox but not on chrome.

By setting the gridStyle to a width of 100% in the css, the table shows up, but has width of 150px, which is even stranger.

Then I noticed that the width is adjusted as soon as you resize the window. This lead me to this (hackerish) solution:

Add a controller to your script with a function that triggers a forced resize.

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

Add the controller and a click&call to said function in the accordion-Tag.

<accordion ng-controller='myCtrl' ng-click="resizer()">

This works in Firefox AND Chrome. Plunker is here

Of course this more a workaround than an answer and not thoroughly tested on other browsers, but maybe it helps you a little bit.