I recently discovered a great script from CodyHouse that allows me to create a filterable portfolio. You can check it out here:
Using AngularJS, I am able to parse data via JSON seamlessly. However, I have encountered an issue where the CSS is not being applied correctly to dynamically loaded elements.
An image showcasing the differences can be seen below:
As depicted in the image, the first row, which is loaded via Angular, seems to lack any applied CSS. On the other hand, the second row, already present in the HTML, displays correctly with the CSS rules.
This discrepancy is puzzling as both rows share the same CSS selectors and rules.
A Plunker demonstrating this issue can be found here: http://plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview
The following represents the markup generated by Angular:
<li class="mix color-1 check1 radio2 option3 ng-scope" style="display: inline-block;" ng-repeat="drawing in drawings"><img src="img/img-1.jpg" alt="Image 1"></li>
And below is the static html markup:
<li class="mix color-1 check1 radio2 option3" style="display: inline-block;"><img src="img/img-1.jpg" alt="Image 1"></li>
The CSS properties applied are as follows:
.cd-gallery ul { text-align: justify; }
.cd-gallery li { width: 23%; }
Despite no discernible difference between them, I am struggling to understand why the CSS isn't displaying properly on dynamic elements compared to static ones. This anomaly has left me scratching my head, as it's the first time I've encountered such behavior with CSS. Any insight or assistance would be greatly appreciated. Thanks in advance!