v8 help with the grid please - Using Umbraco And Getting Started

Daniel Gillett 72 posts 149 karma points

Dec 28, 2019 @ 09:49

v8 Help with the Grid please!

Using Umbraco And Getting Started

Umbraco 8

Hi all,

I'm really liking the new v8. I've been watching some of Paul Seal's videos to get better acquainted with v8 after being away for a few years.

The grid is giving me some issues. I've got this HTML with Bootstrap 3 which has two columns...

 <div class="container" id="events-page">
        <div class="col-sm-7">
            <h1>About Backstreet - Studio</h1>
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
            <img src="images/blog/blog2.png">
            <div class="space-3"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>

        <div class="col-sm-4 col-sm-offset-1">
            <div class="bd-b pd-t-1 pd-b-3 latest-tweets">
                <h3 class="i">Recent Tweets</h3>
                <p>Bla bla Bla...</p>
            </div>
            <div class="bd-b bd-t pd-t-1 pd-b-3 gallery">
                <h3 class="i">Gallery</h3>
                <p>Bla bla Bla...</p>
            </div>
            <div class="outline"></div>
        </div>
    </div>

The first column has "col-sm-7" class which the grid puts in (great). On the second column the grid adds the correct "col-sm-4" BUT I also need to include "col-sm-offset-1" to this column layout to so that it reads class="col-sm-4 col-sm-offset-1" but instead it puts it in a new div, which is what the grid's Bootstrap3.cshtml shows.

                  <div class="grid-section">
                        <div class="col-md-4 column">
<div class="col-sm-offset-1">

So I tried to modify and move the @RenderElementAttributes(area) (also tried the row) but it renders it out like this:

<div class="col-sm-12 class="col-sm-offset-1"">

The RenderElementAttributes function appears to add my css to config and does not use it in Style cssVals so it doesn't render properly.

Can somone please help me set this up correctly? My mom has been waiting ages for her website! :-|

Best wishes, Daniel

grid issue with rendering css where i need it

Copy Link

Paul Seal 524 posts 2889 karma points MVP 6x c-trib

Dec 30, 2019 @ 00:03

Hi Daniel

Sorry for the delay, I've not had time to look at any code until now with it being the Christmas holidays.

Here's what I would do to solve this issue.

I would alter the renderRow helper in the Bootsrap3.cshtml file or better still copy it and rename it to something else. Anyway I would add this inline if statement to check the name of the row and if it is the row name you are interested then add the class and if not don't add anything.

Here is the updated renderRow helper

@helper renderRow(dynamic row, bool singleColumn){
    <div @RenderElementAttributes(row)>
        @Html.If(singleColumn, "<div class='container'>")
        <div class="row clearfix">
            @foreach ( var area in row.areas ) {
            <div class="[email protected] @(row.name.Value == "Your Row Name" ? "col-sm-offset-1" : null) column">
                <div @RenderElementAttributes(area)>
                    @foreach (var control in area.controls) {
                        if (control !=null && control.editor != null && control.editor.view != null ) {
                            <text>@Html.Partial("grid/editors/base", (object)control)</text>
                        }
                    }
                </div>
            </div>}
        </div>
        @Html.If(singleColumn, "</div>")
    </div>
}

And here is the bit you are interested in.

<div class="[email protected] @(row.name.Value == "Your Row Name" ? "col-sm-offset-1" : null) column">

Just change the name of the row to the name of your row.

I hope that helps

Kind regards

Paul

Copy Link

Daniel Gillett 72 posts 149 karma points

Jan 15, 2020 @ 17:23

Thanks so much for your help Paul,

I will check out your solution just as soon as I finish getting set up again. Besides holiday illness, flying, etc. I returned home to find both of my machines would not boot. ...a new hard drive and re-install and new power supply. Argh

I can't wait to try your solution! I'll let you know as soon as I get everything re-installed.

Thanks very much!

Best, Daniel

Copy Link

Daniel Gillett 72 posts 149 karma points

Feb 08, 2020 @ 10:03

Hi Paul!

Thanks for much for your help! I never thought about querying the names in the grid. Thank you!

I ended up using the column size as I'm only using the grid on a generic article page. Here's my code...

<div class="umb-grid">
    @if (oneColumn){
        foreach (var section in Model.sections){
        <div class="grid-section">
        @foreach (var row in section.rows){
            @renderRow(row, true);
        }
        </div>}
    }
    else{
    <div class="container" id="events-page">
        <div class="row clearfix">
            @foreach (var s in Model.sections){
            <div class="grid-section">
                <div class="[email protected]  @(s.grid == "4" ? "col-sm-offset-1" : null)">
                @foreach (var row in s.rows){
                    @renderRow(row, false);
                }
                </div>
            </div>}
        </div>
    </div>}
</div>

Sorry for the late reply. It was a difficult holiday season this year. Caught a 2 week bug; one of my monitors died; lost my hard drive!; and my other machine's power supply went. ...I won't mention the 2 day turnaround getting my daughter to boarding school. :-|

Thank you so much! I will buy you a coffee as soon as I can. ;-)

Copy Link

is working on a reply...

Flag this post as spam?

v8 Help with the Grid please!