Headings disappear if using ng-if on ancestor element

[johnrix]

The following causes the headings to become invisible:

<div ng-if="1">
    <div style="overflow: auto; max-height: 300px;">
    <table>
        <thead fix-head>
            <tr><th>Name</th></tr>
        </thead>
        <tbody>
            <tr><td>A</td></tr>
            <tr><td>A</td></tr>
        </tbody>
    </table>
    </div>
</div>

Removing the ng-if restores them.

[skortchmark9]

As a short term workaround you can use ng-show instead.

[johnrix]

Yep, I did confirm that works at least. For some reason though, the column headings were not aligning for me, so I since gave up on using the directive. I suspect it may have been to do with me using ng-repeat on the <th> elements (I have a variable set of columns, according to a selected report).

[skortchmark9]

I don't think so, it's because the elements are all hidden when the math is done to determine their widths. As a second workaround you can do

$timeout(function() {
  // force table header to recalculate its width.
  window.dispatchEvent(new Event('resize'));
});

[johnrix]

Ah good point, you're more than likely right there!

[Sayaren]

use ng-show instead

[ceiger89]

in the ng-repeat directive, the same.