How to repeat many list items with only 4 per row?

Sep 4, 2014 at 3:04 PM
Hi,

I'm using 2SC along with Bootstrap to create a grid of list items that is 4 columns wide within 4-5 stacked rows. How would I get the repeated items to flow down into the another row?

Here's something like what I'm going for...
<div class="row">
    <div class="col-md-12">
        <repeat>
        <div class="col-md-4">
            <img src="[Content:ImageUrl]" alt="[Content:Heading]"/>
            <h4>[Content:Heading]</h4>
            <p>[Content:Description]</p>
        </div>
        </repeat>
    </div>
</div>
Sep 4, 2014 at 3:12 PM
I dont know how to do that with tokens, here is a c# razor solution that you can adjust to your situation
    @{ 
        int rowCounter = 0;
        var mid = Dnn.Module.ModuleID;
        int itemTotal = List.Count;
    }

    @foreach (var e in List)
    {
        var Content = e.Content;
        
        @* Because we need to close a tag for each 3 items we need to do some extra checks *@ 
        @* if first element start div tag, notice spacial notation of @: because we add an 'invalid non closed' element *@ 
        
        if (rowCounter == 0)
        {
            @:<div class="row">
        }
        @* not first element thne check if the position can be divided by 3 ( 3 column display ) and if so close and start tag *@ 
        if (rowCounter != 0)
        {
            if ((rowCounter % 3) == 0)
            {
                @:</div><div class="row">
            }
        }    
    
        <div class="col-sm-4">
            <figure><img src="@Content.Photo" alt="" /></figure>
            <div class="bordered no-top-border text-center member">
                @Html.Raw(Content.Toolbar)
                <h3>@Content.Name <span class="meta">@Content.Function</span></h3>
                
            </div>
        </div>
        
        rowCounter = rowCounter + 1;
    }
    </div>
Coordinator
Sep 4, 2014 at 3:32 PM
Hi Greyspace

In Tokens we provide simple counter-tokens like [List:Alternator4]. They are documented here.

For example, you would
<div class="row">
    <div class="col-md-12">
        <repeat>
        <div class="col-md-4 col-number-[List:Alternator4]">
            <img src="[Content:ImageUrl]" alt="[Content:Heading]"/>
            <h4>[Content:Heading]</h4>
            <p>[Content:Description]</p>
        </div>
        </repeat>
    </div>
</div>
this would return this the first time
        <div class="col-md-4 col-number-0">
...then this
        <div class="col-md-4 col-number-1">
and the forth time this
        <div class="col-md-4 col-number-3">
the fifth time again
        <div class="col-md-4 col-number-0">
all you have to do now is ensure you have the right CSS-classes to handle everything.

Love from Switzerland,
Daniel
Coordinator
Sep 4, 2014 at 3:36 PM
Edited Sep 4, 2014 at 3:41 PM
As a sidenote: in Razor the similar solution would look a bit like this
@{
    int rowCount = 0;
}
@foreach(var e in List)
{
...
        <div class="co-preview-box col-number-@(rowCount++ % 4)">
        ...
        </div>
}
the above solution would result in a 0, 1, 2, 3, 0...sequence. The rest is then CSS-magic. This is much compact and should do the trick. I'll release a demo code in one of my next blogs about Razor which will cover this, incl. an App containing such code.

With love from Switzerland,
Daniel

PS: the code above is a bit mangled, it should say "rowCount plus plus" but the plusses are being destroyed
Developer
Sep 4, 2014 at 3:40 PM
Addition to Daniel's answer: in your CSS, use clear:left; in addition to [List:Alternator4]:
.col-md-4.col-number-0 { clear:left; }
...to ensure every 4th item is left-aligned.

Raphael
Sep 4, 2014 at 4:15 PM
Your razor code would work as well but my solution follows the structure of bootstrap and will also remain responsive :)
Coordinator
Sep 5, 2014 at 6:23 AM
Actually ours does too :). But we'll get a demo together... :)
Coordinator
Sep 16, 2014 at 6:59 AM
@nokiko
I'm still unversed w/Bootstrap - I'm just curious how you will make this responsive if you have open/close divs for every 3 items. it feels like a table row, and thereby couldn't really wrap (or that's what I would expect). Do you have a live sample I could see and learn from?

Thanks
Daniel
Sep 16, 2014 at 8:02 AM
@Daniel

Well this is the grid structure that is defined by bootstrap so there css has everything defined like the with in percentages and the gutter width,

so every col-4 has a right margin and the last col 4 has that right margin removed

for instance if you have one row div and have eight col-4 in there instead on in 2 row than you will see 3 correct columns and all the rest are misaligned as this is not the structure expected

within the class you can also define other structures for other devices

so class="col-md-4 col-sm-6"

a column will be 4 units width in medium devices and up and will be 6 units width in small devices so you will see 3 columns ( 3x4 = 12 ) on medium devices and up and 2 columns ( 2x6 =12 ) on small and because you have not defined anything for xtra small devices ( col-xs) you will see those stacked below eachother