Copied to clipboard

Flag this post as spam?

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


  • Daniel Gillett 72 posts 149 karma points
    Dec 28, 2019 @ 09:49
    Daniel Gillett
    0

    v8 Help with the Grid please!

    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

  • Paul Seal 419 posts 2264 karma points MVP 3x c-trib
    Dec 30, 2019 @ 00:03
    Paul Seal
    0

    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="col-md-@area.grid @(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="col-md-@area.grid @(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

  • Daniel Gillett 72 posts 149 karma points
    Jan 15, 2020 @ 17:23
    Daniel Gillett
    0

    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

  • Daniel Gillett 72 posts 149 karma points
    Feb 08, 2020 @ 10:03
    Daniel Gillett
    0

    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="col-sm-@s.grid  @(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. ;-)

Please Sign in or register to post replies

Write your reply to:

Draft