start new row after number columns - Using Umbraco 7

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Robert 63 posts 282 karma points

Feb 18, 2015 @ 11:11

Start new row after (number) columns

Using Umbraco 7

Hi there,

I have a footer with 6 categories that contains landingspages that all have col-md-2 so they will fit. But i need to show only 3 categories and then start a new row with the other 3 categories (so they will get col-md-4). It's now going well with only changing the col-md so i need to set a max number of columns in a row.

How can that be done?

This is the code:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
var homePage = CurrentPage.AncestorsOrSelf(1).First();
var textPageQuote = CurrentPage.textPageQuote;
var LandingspaginaCategorie = homePage.LandingspaginaCategorie;
}

<style>
.map-holder #maps{
    height:150px;   
}
</style>
<div class="col-md-12 row Footer">
<div class="col-md-4">
    <ul class="footerAddress">
        <li>
            <h3>Contact</h3>
            <p><i class="fa fa-home"></i> @Umbraco.GetDictionaryValue("SiteName")<br>
            <i class="fa fa-home" style="color:#dd1414;"></i> @homePage.straat, @homePage.postcode @homePage.plaats<br></p>
            <p><i class="fa fa-phone"></i> @homePage.telefoonNummer<br></p>
            <p><i class="fa fa-envelope-o"></i> @homePage.emailAdres</p>
        </li>
        <li>
            <div class="map-holder">
                <div id="maps"></div>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-8">
    <div class="row footerLanding">
        @foreach (var childPage in LandingspaginaCategorie)
        {
            foreach (var landingChild in childPage.Children)
            {
                <div class="col-md-4">
                    <div class="SponsorTypeTitle">
                        @landingChild.name
                    </div>
                    <div>
                        <ul>
                            @foreach (var landingChilds in landingChild.Children.Where("UmbracoNaviHide == false"))
                            {
                                <li>
                                    @landingChilds.name
                                </li>
                            }
                        </ul>
                    </div>
                </div>
            }
        }
    </div>
</div>

Kind regards, Robert

Copy Link

Sören Deger 733 posts 2844 karma points c-trib

Feb 18, 2015 @ 11:50

Hi Robert,

One way to do this is to use the modulo operator. Here is a basic example to use this:

int pos = 0;
foreach(var item in)
{
pos++;
if(pos % 3 !=0) // Your first item in row
{
// do anything before first item in row
}

// code for all every cols (col1, col2, col3)

if(pos%3 ==0) // Your last item in row
{
// do anything after last item in row
}
}

Hope this helps.

Best regards,

Sören

Copy Link

Robert 63 posts 282 karma points

Feb 18, 2015 @ 13:56

0

Hi Sören,

Thank you, but i think that is a fixed solution? I need to do this dynamically because it can be 4 categories but also 15.

Can't this be done by using InGroupsOf?

Copy Link
Sören Deger 733 posts 2844 karma points c-trib

Feb 18, 2015 @ 14:33

0

Hi Robert,

in my example you can set the number 3 in modulo operations as variable. So it should works also. 3 is the number of cols/categories.

I don't have experiences with InGroupsOf any times, but I think it can do this, too. Feel free and try it out ;-)

Best,

Sören

Copy Link
is working on a reply...

Please Sign in or register to post replies