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 35 posts 100 karma points
    22 days ago
    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 395 posts 2155 karma points MVP 2x c-trib
    20 days ago
    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 35 posts 100 karma points
    4 days ago
    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

Please Sign in or register to post replies

Write your reply to:

Draft