I am using angular-gridster to show a grid in my application, but I am seeing some strange behavior, of which my search efforts have yielded nothing.
Here is my code for showing a simple grid in gridster::
<div gridster="gridsterOptions">
<ul>
<li gridster-item="item" ng-repeat="item in standardItems">
<div>{{item.sizeX}}</div>
</li>
</ul>
</div>
standardItems is just the example from the gridster-angular GitHub:
$scope.standardItems = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0 },
{ sizeX: 2, sizeY: 2, row: 0, col: 2 },
...
{ sizeX: 1, sizeY: 1, row: 2, col: 3 },
{ sizeX: 1, sizeY: 1, row: 2, col: 4 }
];
In addition to this grid, other parts of my application use web components, and therefore the webcomponents.js polyfill.
In Chrome (a browser that natively implements web components), the page works fine. But in FireFox and IE (browsers that either do not natively support web components or require user settings to be changed) have an issue processing the ng-repeat. In fact, it doesn't seem process the ng-repeat at all, and the containing div that gridster generates is completely empty.
The following is the HTML generated by gridster in FireFox (note the empty .gridster-content):
<div style="height: 60px;" class="ng-isolate-scope gridster gridster-desktop gridster-loaded" gridster="gridsterOptions" ng-class="gridsterClass()">
<div ng-style="previewStyle()" class="gridster-item gridster-preview-holder"></div>
<div class="gridster-content" ng-transclude=""></div>
/\
Why is this empty? ----||
</div>
If I remove the webcomponents.js polyfill from being loaded on my page, then gridster and the ng-repeat works perfectly in all browsers. This leads me to believe that out of these three items, something is conflicting with the others.
Has anyone encountered this sort of problem? Any help is very appreciated.
Links:
