Bootstrap

[tjd2013]

Hey @rickbutterfield , amazing package does alot of the heavy lifting I was trying to do manually!

I have come up against the exact same issue I was having when trying to create my own block views though, sorry if I over explain what are basic things, I just want to be complete in my question. I also appreciate that what I might be trying to do oversteps the scope of your package.

I am trying to use Bootstrap for layout, which works perfectly fine on the front end, but on the backend due to the extra html injected it doesnt work.

An example structure of blocks would be;

• Container
• • Row
• • • Column
• • • Column
• • • Column

Using the bootstrap classes of "container", "row" and "col-4" to get a central row with three columns and some gutter spacing between them, this works fine on the front end. In the backend because of the web components inserted by the Block Grid editor, the column div's do not sit immedatly inside of the row div, there is extra html in there which Bootstrap is not expecting.

I had two possible solutions, both of which i hit a dead end with.

The first was to try and create my own version of UmbBlockGridEntriesElement and UmbBlockGridEntryElement and override the render methods... this was quickly shut down when i realised they were not exported to inherit from. On my initial look after this it appears as though the whole Block Grid editor would need to be replaced with a custom solution to have the level of control there i was hoping for.

The second method initially seemed more promising, this was to assume that only columns can be added to row blocks and have the row partial render the columns and then the column partial just render its own area. The same issue arose, since in my row i only have a single area with three column blocks, i couldnt call "@await Html.GetPreviewBlockGridItemAreasHtmlAsync(Model)" and i tried to loop through the blocks myself to render the partials, but although this worked on the front end as it was not adding any of the web component tags in the back office just rendered nothing.

Is there something I am missing on how I can achieve this level of functionality? or am I just out of luck and need to create more rigid blocks like one column row, two column row, three column row etc and just add areas in for each column that way?

There is another related issue which is the positioning of the uui toolbar on hover, if the blocks have little or no padding it can make the toolbars overlap parent container toolbars and i just cant find a way to override their styling, i suspect that is down to the shadow box though!

Thanks in advance for any guidance!

[rickbutterfield]

Hey @tjd2013!

@deanleigh is a big supporter of BlockPreview and has been building UmBootstrap on it for some time so probably has some great insights on implementation!

https://github.com/UmTemplates/UmBootstrap

[deanleigh]

Hi @tjd2013
there is a lot of data that is not exposed from Block Grid and it certainly needs some love.

Hopefully as HQ are working on reusable blocks, they may revisit some of the things that got left aside on the first round of building the block Grid Editor.

In the meantime as @rickbutterfield mentioned I have. included some workarounds in https://umbootstrap.com/.

It's a bit hacky, but I used the bootstrap utility classes for the area aliases and then pull them in to the code e.g.

class="area-@Model.ColumnSpan"

class="area-6 primary g-col-12 g-col-md-8 g-col-lg-6 p-3 rounded-4 bg-body"

I have tried it on Bootstrap to only use native Bootstrap CSS deliberately, so if you take a look you, find some of the answers you are looking for.