Umbraco 10: Content Blockers Modal picker does not take full height of the page

PerplexDigital / Perplex.ContentBlocks

Block based content editor for Umbraco

MIT License

31 stars 15 forks source link

Umbraco 10: Content Blockers Modal picker does not take full height of the page #71

Closed royberris closed 2 years ago

royberris commented 2 years ago

Hi, there seem to be some changes in 10 that aren't working completely. Like you can see in the screenshot the modal for picking a content block doesn't take the full height anymore.

It is configured like this:

royberris commented 2 years ago

Using version 2.1.4

royberris commented 2 years ago

Any update on this? On some pages we are unable to choose a content block because it is not high enough.

palcon-dc commented 2 years ago

I tried to look at this over the weekend. I think it's because in Umbraco 10.2.0 the property editor markup has absolute positioned divs, the style Perplex contentblocks is using for the overlay no longer works. I hoped the solution would be a simple css rule change, but I think a js solution to append/remove the overlay to/from the DOM might be the way to go. I would like to attempt that on a fork, but time is tight for me right now. In the meantime I am just sticking with Umbraco 10.0.1 ...

royberris commented 2 years ago

@palcon-dc wasn't aware this was introduced in 10.0.2, I thought it was an overall 10 change. I'll consider downgrading or I will see if I find the time to work on a PR

PerplexDaniel commented 2 years ago

Hi guys, sorry for the delay I was out of the office for a few weeks (holidays). I see it was still working fine in 10.1.0 but is now indeed broken in 10.2.0. We will have a look at a fix that will hopefully work in all 9.x and 10.x versions and I expect an update of our package by the end of next week.

PerplexDaniel commented 2 years ago

It looks like Umbraco has added the CSS rule contain: layout to .umb-property-editor which causes this. We will look for a solution to this, but a temporary patch is available until we release an update by simply adding a custom CSS rule on that class: contain: none.

You can unzip this file into your App_Plugins to add this CSS override to your installation for the time being which seems to fix the issue. However, I assume Umbraco added this rule for a reason so I can imagine some Umbraco styling will now look differently so please keep an eye out for that. I haven't looked at their Git history to see why this was added.

We will look for some other way to fix this in the package next week.

UmbracoOverrides.zip

PerplexDaniel commented 2 years ago

@royberris I just released 2.1.5 on NuGet which should fix this issue. Please update to this version and if you still experience the bug feel free to re-open this issue.

PerplexDaniel commented 2 years ago

Umbraco 10.2.1 supposedly also fixes this issue by changing their CSS to contain: style rather than contain: layout so instead of updating ContentBlocks to 2.1.5 you could also update Umbraco to 10.2.1. Of course ContentBlocks 2.1.5 also works fine with 10.2.1 so there is no harm in updating.