Break and resume repeat after nth div

Wappler General Need Help
1

I have a repeat on a row which shows a column (containing a card) per item from a database query. Working perfectly.

I am wanting to stop after the 6th column, end the row, insert a <div> and then resume the row/columns again until the next 6th column.

Here’s what I have at the moment (simplified) -

<div class="row" is="dmx-repeat">
    <div class="col">
        <div class="card"> 1 </div>
    </div>
    <div class="col">
        <div class="card"> 2 </div>
    </div>
    <div class="col">
        <div class="card"> 3 </div>
    </div>
    <div class="col">
        <div class="card"> 4 </div>
    </div>
    <div class="col">
        <div class="card"> 5 </div>
    </div>
    <div class="col">
        <div class="card"> 6 </div>
    </div>
    <div class="col">
        <div class="card"> 7 </div>
    </div>
</div>

And here’s what I’m trying to achieve -

<div class="row" is="dmx-repeat">
    <div class="col">
        <div class="card"> 1 </div>
    </div>
    <div class="col">
        <div class="card"> 2 </div>
    </div>
    <div class="col">
        <div class="card"> 3 </div>
    </div>
    <div class="col">
        <div class="card"> 4 </div>
    </div>
    <div class="col">
        <div class="card"> 5 </div>
    </div>
    <div class="col">
        <div class="card"> 6 </div>
    </div>
</div>

<div> SECTION OR LINE BREAK </div>

<div class="row" is="dmx-repeat">
    <div class="col">
        <div class="card"> 7 </div>
    </div>

etc....

Is this possible?

2

Do you just need to show 6 cols in each row? Or is it something else you are trying to achieve?

3

Well it is just a thought but it might work.
You could use the {{$index}} value from the repeat.

4

@Teodor Yes, 6 columns per row. There is an unknown number of rows which is why I’m trying to use a repeat.

@t11 Do you have an example?

5

Why not just set the class to col-2 then?

6

Sorry, I meant something like this:

▢ ▢ ▢

▢ ▢ ▢

== Break ==

▢ ▢ ▢

▢ ▢ ▢

== Break ==

▢ = Card generated from repeat/server connect

7

I got it posting you in now

8

What you actually need is to make a modulus operation.
So if you do the following

<div class="col-6">
                <h3>Repeat</h3>
                <div dmx-repeat:repeat1="serverconnect1.data.query1">
                    <div>{{product_id}}</div>
                    <div dmx-show="($index+1)%6==0">BREAK</div>
                </div>
            </div>

And you will get something like below

modOperation
modOperation456×837 31.7 KB

3 Likes
9

Amazing, thanks so much, saved me a few hours of head banging :smile:

1 Like
10

You just need to play with the repeat and the classes in order to achieve the exact result you looking for