Copied to clipboard

Flag this post as spam?

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


  • Harry Stewart 15 posts 95 karma points
    Nov 08, 2016 @ 20:47
    Harry Stewart
    0

    Umbraco 7.5.4 - Grid layout, not full width

    I'm creating a site in Umbraco, using its grid editor but for some reason, the content isn't full width of the page due to an awkward 'container' class, I've tried editing the content generator in the grid's configuration files but it doesn't seem to help as I'm left with an extra floating margin either to the left or right of the page.

    <div class="umb-grid">
       <div class="grid-section">
          <div>
             <div class="row">
                <div class="container">
                   <div class="col-md-12 column">
                      <div>
                         Content Code...
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
    

    The code snippet above is the HTML being generated by the default grid config settings.

    The grid is set up with a full-width page & full-width column.

    Here are some screenshots:

    Grid configuration - Page

    Grid configuration - Column

    CMS Backend editor view with content

    Front-end view, I've highlighted the floating margin with a red rectangle

    Also please ignore content text as the project is still under development as you can see, so please ignore any grammar & bad word choice, it is currently just quick content filler which is also going to be used as notes for when I'm populating the content, Thanks!

  • Casper 70 posts 308 karma points
    Nov 08, 2016 @ 21:14
    Casper
    0

    You need to customize the view used by the grid system. These views can be found in \Views\Partials\Grid\ By default the grid system uses the bootstrap3 one, but you can tell the grid system to use bootstrap2 or any other view.

    @Html.GetGridHtml(Model.Content, "NAME_OF_VIEW")

    Here i have removed the most obvious things i can see that might help you design back on track(i have not tested it).

    @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;
    
            @if (oneColumn)
            {
                foreach (var section in Model.sections) {
                        @foreach (var row in section.rows) {
                            @renderRow(row, true);
                        }
                }   
            }else { 
                <div class="container">
                    <div class="row">
                        @foreach (var s in Model.sections) {
                                <div class="[email protected]">
                                    @foreach (var row in s.rows) {
                                        @renderRow(row, false);
                                    }
                            </div>
                        }
                    </div>
                </div>   
            }
    }
    
    @helper renderRow(dynamic row, bool singleColumn){
        <div @RenderElementAttributes(row)>
            @Umbraco.If(singleColumn, "<div class=\"container\">")
            <div class="row">
                @foreach ( var area in row.areas ) {
                <div class="[email protected]">
                    <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>
            @Umbraco.If(singleColumn, "</div>")
        </div>
    }
    
    @functions {
        public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
        {
            var attrs = new List<string>();
            JObject cfg = contentItem.config;
    
            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));
        }
    }
    
  • Harry Stewart 15 posts 95 karma points
    Nov 08, 2016 @ 23:47
    Harry Stewart
    0

    Thanks for the response bud, I tried what you sent and even tried playing around with again myself but it still doesn't seem to be working which is incredibly annoying considering Umbraco & Bootstrap are supposed to be official and reliable sources, here is the result from what you said bud:

    enter image description here

  • Ismael 71 posts 354 karma points
    Nov 09, 2016 @ 18:26
    Ismael
    0

    It's hard to tell but potentially this is a styling issue rather than grid specific.

    In bootstrap .container restricts the width of the div so it's never wider than a maximum number of pixels.

    .container-fluid removes the restriction and makes the div 100%.

    However I think in your original post, the problem looks like that background color is being applied within or on the .container level, where is should be applied sooner, perhaps on the .row or anything above it.

    I'm not sure what's happening in your second post - but it also looks non-grid related.

    If the site is available publicly - that might help, but I'm assuming it's not.

  • Martin 278 posts 662 karma points
    Nov 10, 2016 @ 09:58
    Martin
    100

    Hi Harry, I had the same issue when i tried to implement Foundation in place of Bootstrap.

    I'll run through what i did to get a full width row.

    This is your code from above with notes on where you can edit from the umbraco dashboard.

    <div class="umb-grid">
       <div class="grid-section">
          <div>  <!-- ROW SETTINGS ARE APPLIED HERE  -->
             <div class="row">  <!-- YOU CANT EDIT THIS IN DASHBAORD -->
                <div class="container">  <!-- YOU WANT YOUR FLUID CLASS HERE -->
                   <div class="col-md-12 column">
                      <div> <!-- CELL SETTINGS ARE APPLIED HERE  -->
                         Content Code...
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
    

    You have two options.

    You can either amend your css to say something like the following and then apply the class container-fluid in the row class field

    .container-fluid .container { /* your styles to make the child */ }

    Or you could put in a if else statement in your Bootstrap partial view. What that will do is check the name of the row type and output a different html structure with the fluid class applied.

        @helper renderRow(dynamic row, bool singleColumn){
    
    if (row.name == "full-width") {
            <div @RenderElementAttributes(row)>
                @Umbraco.If(singleColumn, "<div class='container-fluid'>")  @*YOU MAY NEED TO REMOVE THIS AND JUST PUT IN PLACE A  DIV WITH CLASS  *@
                <div class="row clearfix">
                    @foreach ( var area in row.areas ) {
                    <div class="[email protected] 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>
                @Umbraco.If(singleColumn, "</div>")
            </div>
    } else {
            <div @RenderElementAttributes(row)>
                @Umbraco.If(singleColumn, "<div class='container'>")  @*YOU MAY NEED TO REMOVE THIS *@ 
                <div class="row clearfix">
                    @foreach ( var area in row.areas ) {
                    <div class="[email protected] 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>
                @Umbraco.If(singleColumn, "</div>") @*YOU MAY NEED TO REMOVE THIS *@
            </div>
    
    }
       }
    
  • Harry Stewart 15 posts 95 karma points
    Nov 10, 2016 @ 11:44
    Harry Stewart
    0

    Thanks Martin, I used what you sent and found a solution for my problem, much appreciated!

  • Navneet Kumar Jain 9 posts 89 karma points
    Feb 05, 2021 @ 00:42
    Navneet Kumar Jain
    0

    Hi Harry,

    I have the same issue which you had faces, could you please send me the file where I need to update for full width grid layout.

Please Sign in or register to post replies

Write your reply to:

Draft