columnDefs header does not show from time to time

Question

I have a very random problem on UI. It looks like the column definitions do not show from time to time. it works fine 9 out of 10 times.

Two gif animations have been included to show what I actually mean as that will help to understand the issue much faster.

The screen below displays the column definition and everything is visible.

However, the second picture shows that the header column definitions are not visible

That problem is a completely random problem and I can't see why something like that is happening.

There is a link on official github repository for ui-grid issue which describes similar situation I have: ui-grid similar issue I tried to apply a few things but it does not work eg wrapping html page with

 <script type="text/ng-template"> 

tag when I use ng-include but it didn't help

Please advice if you had similar problem or you know how to fix it.

Code snippets:

<div class="modal-body" style="width: 100%; height: 100%;" ng-modal-drag>
  <div class="checkbox pull-right" style="margin-bottom: -40px; position: relative">
    <label class="text-primary">
      <input type="checkbox" ng-click="vm.updateHighlight()" ng-model="vm.companyMatch.isHighlighted" style="margin-top: 2px; outline: none;">Reviewed
    </label>
  </div>
  <div class="clearfix"></div>

  <uib-tabset>
    <uib-tab ng-repeat="tab in vm.tabs" active="tab.active" heading="{{tab.heading}}" select="tab.select()" ng-if="tab.heading != 'Map' || vm.companyCandidates.length > 0">
      <div ng-include="tab.content"></div>
    </uib-tab>
  </uib-tabset>
</div>

The interesting part is that loads html content and on the first tab the ui-grid always works and the problem exists only on the third tab when there is another ui-grid element

The related javascript code looks like below:

vm.gridOptions = {
  paginationPageSizes: [5, 10, 25],
  paginationPageSize: 5,
  enableColumnResizing: true,
  enableRowSelection: true,
  enableRowHeaderSelection: false,
  multiSelect: false,

  columnDefs: [{
    field: 'businessName',
    displayName: 'Business name'
  }, {
    field: 'fullAddress',
    displayName: 'Address'
  }, ...],

  onRegisterApi: function(gridApi) {
    vm.gridApi = gridApi;
  }
};

Answer 1

After spending a reasonable amount of time on that issue I finally found the solution to that problem.

Here is the documentation for ui-grid when they encourage to use special javascript function to render grid properly after opening it in modal window.

I have added code snippet below:

$interval( function() {
    $scope.gridApi.core.handleWindowResize();
}, 500, 10);

and that thing works for me!