I'm in the process of creating a website that utilizes ng-repeat to showcase two directives and an element. The second directive and the element are displayed after a certain number of "repeats" (determined by index). These directives appear as rectangular cards, arranging themselves from left to right until they fill up the screen, then moving on to the next line. The screenshot below illustrates this layout:
https://i.sstatic.net/NRSI0.png
In the image, the white rectangles represent the first directive, while the black rectangles signify the second directive and element. However, I'm encountering an issue where if the black rectangle is meant to be the first item on a new line, it ends up displacing the last white rectangle from the previous line and appearing before the black rectangle on the following line. Essentially, the two directives within the ng-repeat loop seem to be sticking together instead of separating when there isn't enough space for both on one line. Here's an example to clarify my point:
https://i.sstatic.net/JM0Nz.png
Now, let's take a look at my code. Below is the HTML snippet for the ng-repeat:
<div ng-repeat="acqui in acquis" class="repeated">
<card-info class="card" acqui="acqui" ng-style=""></card-info>
<ad-info class="ad-style" gt;if="!(($index + 1) % adFrequency)"></ad-info>
<div class="ad-spacing" ng-if="!(($index + 1) % adFrequency)"></div>
</div>
The card-info directive (representing white rectangles) appears every time, whereas the ad-info directive (representing black rectangles) only shows up at intervals determined by adFrequency.
Next, here's the CSS I've implemented using LESS:
.card {
.shadow;
width: 350px;
height: 530px;
display: inline-table;
background-color: white;
background-size: 100%;
background-repeat: no-repeat;
margin: 0 10px 20px 12px;
}
.ad-style {
position: relative;
.ads {
position: absolute;
.shadow;
width: 350px;
height: 530px;
display: inline-table;
background-color: black;
margin: 6px 0 0 8px;
}
}
.ad-spacing {
width: 350px;
display: inline-table;
margin: 0 10px -5px 10px;
}
Is there a way to "unbundle" these elements so that they don't get grouped together?
Note: I attempted to create a JSFiddle, but due to the complexity and size of the project, I couldn't get everything to function correctly. I've trimmed down the content as much as possible to simplify this post.