Hi,

make your menu in partial view and add in macro.

and used this macro in grid layout.

Hope this is helpful

Regards,

Mehul Gajjar.

Thx, that's made it work. But for some reason now, my grid is showing outside my website.

The grid has a combined number of 12 columns and the layout has a 2 column setting (4 and 8 = 12). Then I have my rows which have their own respected sizes for the sidenav macro and other stuff like content, images, etc...

http://www.don-zalmrol.be/blah/

Hi,

As in your grid layout 4 rows created Full , Half , Photo+Content and macro.

kindly click on macro row and increase the number of cell same as full row.

Regards,

Mehul Gajjar

Hi Mehul,

I've did it just now. But the page got wider instead of smaller :) All my rows are now set to 12 columns in total.

Seems it's something to do with the row size.

This is my template code, which is as you can see just basic stuff.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{ Layout = "Master.cshtml"; }

<div class="container">

    <div class="row">               

        <div class="wow fadeInDown">

            @CurrentPage.GetGridHtml("bodyText")
        </div>

    </div>

</div>

Hi Laurens, 

Your code suggests your nesting div (within GetGridHtml which by default is bootstrap3.cshtml) with a class of container within another div with class of container. As the container class defines a width of 1170px for large widths in bootstrap 3 there lies your issue. One way around this would be to create a customer grid partial within the grid folder then use it by @CurrentPage.GetGridHtml("bodyText", customgridpartial). Try copy and pasting the bootstrap3.cshtml and then remove the container div to start then by changing the grid settings you should be able to get it to work.

Good luck!

JC

Hi Rune, I've removed it, the styling is now a little bit different. But still showing out of the page.

I'll take a look at J.C's suggestion about the own styling layout.

J.C what do I need to do exactly?

Do I need to:

1. Create a new partial view under Partial views -> Grid -> customgridpartial.cshtml
2. Copy all the contents of bootstrap3.cshtml to the customgridpartial.cshtml
3. Remove all the class items

Ok, so I've changed the grid setttings in the bootstrap file. I've just created a new one and changed the div's to the ones I use.

http://www.don-zalmrol.be/blah/

The page is now showing it much better, but there are still some issues in it. Main concern now is that the sidenavigation is listed ontop of my content instead of besides it.

Bootstrap code:

@inherits UmbracoViewPage<dynamic>

@using Umbraco.Web.Templates @using Newtonsoft.Json.Linq

@* Razor helpers located at the bottom of this file *@

@if (Model != null && Model.sections != null) { var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;

<div class="content">
    @if (oneColumn)
    {
        foreach (var section in Model.sections)
        {
            <div class="container">
                @foreach (var row in section.rows)
                {
                    @renderRow(row, true);
                }
            </div>
        }   
    }

    else
    { 
        <div class="container">
            <div class="row">
                @foreach (var s in Model.sections)
                {
                    <div class="col-xs-12">
                        <div class="[email protected] wow fadeInDown">
                            @foreach (var row in s.rows)
                            {
                                @renderRow(row, false);
                            }
                        </div>
                    </div>
                }
            </div>
        </div>   
    }
</div>

}

@helper renderRow(dynamic row, bool singleColumn) {

@functions { public static MvcHtmlString RenderElementAttributes(dynamic contentItem) { var attrs = new List

    if(cfg != null)
        foreach (JProperty property in cfg.Properties())
        {
            attrs.Add(property.Name + "=\"" + property.Value.ToString() + "\"");
        }

    JObject style = contentItem.styles;

    if (style != null)
    { 
        var cssVals = new List<string>();

        foreach (JProperty property in style.Properties())
            cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");

        if (cssVals.Any())
            attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
    }

    return new MvcHtmlString(string.Join(" ", attrs));
}

}

Little update, I'm getting there.

The layout is starting to look like a "regular" page. But now I need to lower the content a bit so it isn't stuck at the top nav bar.

http://www.don-zalmrol.be/blah/

Ok, fixed :)

Seemed that I needed to put the

Hi Laurens, been busy the last couple of days glad you got it sorted! 

is working on a reply...