I have an angular-bootstrap $modal with a ui-grid directive inside. Opening the modal the first time works without issue. The second time, the ui-grid container elements all seem to initially have an offsetWidth/Height of 0 which messes up it's internal height calculations - the grid hasn't rendered properly and a parent div is now 400px taller.
Using the ui-grid auto-resizing works, but I'm eager to avoid such a performance-draining event. I'd debounce it if I had to use it, which I may anyway, but I'm looking for better explanations.
Applying the width/height to the grid directive via CSS doesn't work.
Applying the width/height via inline style does work.
Seems like maybe the second time around, the modal renders faster than the css can be applied? I'm at a loss as to why this is happening.
Debugging the element widths inside ui-grid (which uses offsetWidth/Height) always shows the correct values the first time, but subsequent openings show all values as "0".
Using Angular 1.3.15, angular-bootrstrap 0.12.1, ui-grid 3.0.0rc2
Calling the modal:
$modal.open({
templateUrl: 'someModal.html',
controller: 'SomeModalController'
});
The template has some form fields, and the directive:
<div style="width:367px;height:122px;" ui-grid="gridOptions" ui-grid-selection class="grid"></div>
Inside the main ui-grid directive's post method, the offsetWidth/Height of the element is always zero the second time, but if I use setTimeout for 10ms, the sizes are reported correctly.
Take a look at the code in the modal tutorial - it sets a timeout then calls grid.handleResize. This may be what you need. http://ui-grid.info/docs/#/tutorial/110_grid_in_modal