Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Peter Cort Larsen 418 posts 1015 karma points
    Jan 10, 2023 @ 09:55
    Peter Cort Larsen
    0

    Block grid umbraco 11

    Using Umbraco And Getting Started
    Umbraco 9

    Hi,

    I am trying to use the new block grid functionality in Umbraco.

    Its seems to me that it aint responsive on the frontend. The new css used to render the areas, seems unnecessary complicated.

    I dont understand why the complicated css is needed. Normally people use something bootstrap. Cant seem to find a way to use both bootstrap and all the css used for the block grid editor.

    Can someone help?

    Copy Link
  • Huw Reddick 1737 posts 6098 karma points MVP c-trib
    Jan 10, 2023 @ 16:08
    Huw Reddick
    0

    At the bottom of the Block Grid datataype, there is an option to download some default css to base your style sheet on, these default settings should make the grid more responsive

    enter image description here

    Copy Link
  • Peter Cort Larsen 418 posts 1015 karma points
    Jan 12, 2023 @ 14:56
    Peter Cort Larsen
    1

    Found a way to change the generated html:

    Here is a section:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<TwoColumn48Block>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    bool isInBackend = Context.Request.Path.ToString().Contains("umbraco") ? true : false;
}
@if(isInBackend) {
    <section>
    @await Html.GetBlockGridItemAreasHtmlAsync(Model)
    </section>
}
else {
    <div class="row">
        <div class="col-md-4">   
        @await Html.GetBlockGridItemAreaHtmlAsync(Model, "leftArea")
        </div>
        <div class="col-md-8">
        @await Html.GetBlockGridItemAreaHtmlAsync(Model, "contentArea")
        </div>
    </div>
}
    Copy Link
  • Huw Reddick 1737 posts 6098 karma points MVP c-trib
    Jan 12, 2023 @ 16:31
    Huw Reddick
    0

    That's quite a neat solution, I like it :)

    Copy Link
  • Huw Reddick 1737 posts 6098 karma points MVP c-trib
    Jan 12, 2023 @ 16:58
    Huw Reddick
    101

    To expand on your example, if you add the following then it will work if your column sizes are changeable.

    @{
    bool isInBackend = Context.Request.Path.ToString().Contains("umbraco") ? true : false;
    var leftColSpan = ((Umbraco.Cms.Core.Models.Blocks.BlockGridArea[])Model.Areas)[0].ColumnSpan;
    var rightColSpan = ((Umbraco.Cms.Core.Models.Blocks.BlockGridArea[])Model.Areas)[1].ColumnSpan;
}
@if(isInBackend) {
    <section>
    @await Html.GetBlockGridItemAreasHtmlAsync(Model)
    </section>
}
else {
    <div class="row">
        <div class="col-md-@leftColSpan">
            @await Html.GetBlockGridItemAreaHtmlAsync(Model, ((Umbraco.Cms.Core.Models.Blocks.BlockGridArea[])Model.Areas)[0].Alias)
        </div>
        <div class="col-md-@rightColSpan">
            @await Html.GetBlockGridItemAreaHtmlAsync(Model, ((Umbraco.Cms.Core.Models.Blocks.BlockGridArea[])Model.Areas)[1].Alias)
        </div>
    </div>
}
    Copy Link
  • Peter Cort Larsen 418 posts 1015 karma points
    Jan 13, 2023 @ 08:15
    Peter Cort Larsen
    0

    Good idea

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft