Mosaicflow with ng-repeat
Opened this issue · 0 comments
magdapal commented
When I use mosaicflow with ng repeat, it does not work well and I don't know what I'm doing wrong.
Below is my code:
<div class="clearfix mosaicflow" data-min-item-width="230">
<div>
<div class="mosaicflow__item" data-ng-repeat="image in images">
<a href="gallery_detail.html"> <img src="[[ image.image ]]" alt=""></a>
<p>[[ image.name ]]</p>
</div>
</div>
</div>
and the code generated by the browser:
<div class="clearfix mosaicflow" data-min-item-width="230" style="visibility: visible;">
<div style="visibility: hidden; width: 100%;"></div>
<div class="mosaicflow__column" style="width: 33.3333%;">
<div id="mosaic-0-itemid-1">
<!-- ngRepeat: image in images -->
<div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
<a href="gallery_detail.html">
<img src="" alt="" data-pin-nopin="true">
</a>
<p class="ng-binding"></p>
</div>
<!-- end ngRepeat: image in images -->
<div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
<a href="gallery_detail.html">
<img src="" alt="" data-pin-nopin="true">
</a>
<p class="ng-binding"></p>
</div>
<!-- end ngRepeat: image in images -->
<div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
<a href="gallery_detail.html">
<img src="" alt="" data-pin-nopin="true">
</a>
<p class="ng-binding"></p>
</div>
<!-- end ngRepeat: image in images -->
<div class="mosaicflow__item ng-scope" data-ng-repeat="image in images">
<a href="gallery_detail.html">
<img src="" alt="" data-pin-nopin="true">
</a>
<p class="ng-binding"></p>
</div>
<!-- end ngRepeat: image in images -->
</div>
</div>
<div class="mosaicflow__column" style="width: 33.3333%;"></div>
<div class="mosaicflow__column" style="width: 33.3333%;"></div>
</div>
I do not know why the columns appear at the end of the code.