jquery - 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, when placing a grid inside an accordion with the child accordion-group closed on initial page load, the grid is assigned a width of zero and does not display.

Can anyone point me in a direction to solve this, either by adjusting CSS classes or by trapping the accordion-group events and re-rendering the grid? I've been running around in circles with this one!

EDIT: Apologies, Plunker now public!

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.