Copied to clipboard

Flag this post as spam?

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


  • Peter Laurie 47 posts 121 karma points
    Sep 29, 2023 @ 09:22
    Peter Laurie
    0

    Umbraco Block Grid without using inline style tags for variables

    Hi,

    We use the Umbraco Grid (legacy) in Umbraco 10 and I am looking at moving to Umbraco 12 and moving to use the Block Grid Editor which is being widely promoted as the way forward on Umbraco.

    I have been investigating this. One aspect of or website build is that we use a very strong CSP (Content Security Policy) where unsafe-inline is NOT allowed for styles. hence was are moving toward removing all inline styles, and this I find is at odds with the implementation of the Block Grid editor - as least on the front end. For example, when I remove the style attributes, from the items.cshtml block editor, such as:

    style=" --umb-block-grid--item-column-span: @item.ColumnSpan; --umb-block-grid--item-row-span: @item.RowSpan; "
    

    The whole design on the front end fall apart.

    I will also look at maybe trying to introduce Bootstrap 5 Grid CSS

    Can the Block Grid operate successfully without the use of these inline styles?

    This seems greatly limiting.

    Thank you for any feedback.

    Kind regards.

    Peter

  • Jessie Yeagle 3 posts 73 karma points
    May 20, 2024 @ 21:23
    Jessie Yeagle
    0

    Here's how I dealt with this exact same issue. I am not sure how it will work in the long haul, but it is the only thing I could come up with.

    • I changed all the CSS variables on the style attributes into individual css classes, taking advantage of the fact that the number of columns on the grid is finite.

      /* Example snippet */
      
      
      .umb-block-grid__area-grid-columns-12
      {
           --umb-block-grid--grid-columns: 12;
      }
      
      
      .umb-block-grid__area-grid-columns-11
      {
          --umb-block-grid--grid-columns: 11;
      }
      
      
      .umb-block-grid__area-grid-columns-10
      {
           --umb-block-grid--grid-columns: 10;
      }
      /* and so on for this variable and the others */
      

    Then I changed the partial views to use the new classes:

    <div class="umb-block-grid__area umb-block-grid__area-grid-columns- @Model.ColumnSpan umb-block-grid__area-area-column-span- @Model.ColumnSpan umb-block-grid__area-row-span- @Model.RowSpan" >
    

    Then I removed the style attributes.

    You'll have to decide on a cap for the number of rows you will support.

    Take it with a grain of salt. I don't know if my answer is the best one, but I hope it is better than no answer at all!

Please Sign in or register to post replies

Write your reply to:

Draft