Block grid editor layout not showing 2 column layout on front end (Umbraco 13)
Hi Folks,
I have the two coulm grid editor but it's only showing one column - how do I ensure this is displaying - here's the mark-up:
<div class="umb-block-grid__area-container" style="--umb-block-grid--area-grid-columns: 6;">
<div class="umb-block-grid__area" data-area-col-span="6" data-area-row-span="1" data-area-alias="left" style="--umb-block-grid--grid-columns: 6;--umb-block-grid--area-column-span: 6; --umb-block-grid--area-row-span: 1;">
<div class="umb-block-grid__layout-container">
<div class="umb-block-grid__layout-item" data-content-element-type-alias="umbBlockGridDemoRichTextBlock" data-content-element-type-key="69bc7260-86ca-4b9e-9cea-28834e0bc2a1" data-element-udi="umb://element/987fbc912a4940c79dd9ca940b47f29e" data-col-span="6" data-row-span="1" style=" --umb-block-grid--item-column-span: 6; --umb-block-grid--item-row-span: 1; ">
<div style="padding: 20px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget purus at enim dapibus auctor a vitae erat. Nulla vestibulum tortor dolor, eget accumsan diam mattis commodo. Phasellus sed facilisis nisl, condimentum elementum mi. Morbi mollis eu libero a pharetra. Quisque ipsum felis, tincidunt in diam sit amet, facilisis feugiat mauris. Curabitur aliquet, enim nec tempor dignissim, orci libero ullamcorper turpis, eu pellentesque diam nunc et ex. Morbi hendrerit libero est, eu mollis lacus hendrerit et. Mauris nibh magna, posuere in pulvinar ac, dapibus sed nibh. Aliquam a faucibus nisi. Sed dignissim in tortor vestibulum rutrum. Nulla sit amet posuere ipsum, a pharetra elit. Cras luctus aliquet enim, non semper mauris luctus nec. Quisque nec leo in est malesuada molestie.</p>
</div>
</div>
</div>
</div>
</div>
<div class="umb-block-grid__area-container" style="--umb-block-grid--area-grid-columns: 6;">
<div class="umb-block-grid__area" data-area-col-span="6" data-area-row-span="1" data-area-alias="left" style="--umb-block-grid--grid-columns: 6;--umb-block-grid--area-column-span: 6; --umb-block-grid--area-row-span: 1;">
<div class="umb-block-grid__layout-container">
<div class="umb-block-grid__layout-item" data-content-element-type-alias="umbBlockGridDemoRichTextBlock" data-content-element-type-key="69bc7260-86ca-4b9e-9cea-28834e0bc2a1" data-element-udi="umb://element/987fbc912a4940c79dd9ca940b47f29e" data-col-span="6" data-row-span="1" style=" --umb-block-grid--item-column-span: 6; --umb-block-grid--item-row-span: 1; ">
<div style="padding: 20px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget purus at enim dapibus auctor a vitae erat. Nulla vestibulum tortor dolor, eget accumsan diam mattis commodo. Phasellus sed facilisis nisl, condimentum elementum mi. Morbi mollis eu libero a pharetra. Quisque ipsum felis, tincidunt in diam sit amet, facilisis feugiat mauris. Curabitur aliquet, enim nec tempor dignissim, orci libero ullamcorper turpis, eu pellentesque diam nunc et ex. Morbi hendrerit libero est, eu mollis lacus hendrerit et. Mauris nibh magna, posuere in pulvinar ac, dapibus sed nibh. Aliquam a faucibus nisi. Sed dignissim in tortor vestibulum rutrum. Nulla sit amet posuere ipsum, a pharetra elit. Cras luctus aliquet enim, non semper mauris luctus nec. Quisque nec leo in est malesuada molestie.</p>
</div>
</div>
</div>
</div>
</div>
Block grid editor layout not showing 2 column layout on front end (Umbraco 13)
Hi Folks,
I have the two coulm grid editor but it's only showing one column - how do I ensure this is displaying - here's the mark-up:
Any ideas what I'm doing wrong? Thanks
Darren
Perhaps you forgot to add the default styles to your front-end?
https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/block-grid-editor#stylesheet
Hi Billy,
You are right - I did forget to add that haha - thanks for that. Working now!
Darren
One final question: Where would i find this: ~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoImageBlock.html
It's not in the solution?
You are probably using the BlockGrid Example package? These views are in the packages itself, so you can check the repo: https://github.com/umbraco/Umbraco.BlockGrid.Example.Website/tree/main/UmbracoBlockGrid/App_Plugins/UmbracoBlockGrid/BlockViews
Perfect - Thanks Billy.
is working on a reply...