umb-overlay inside umb-editor is hidden

[enkelmedia]

We're using some "Nested Nested Content" inside Doc Type Grid Editor, this works fine until there is more than one Document Type configured on the Nested Content Data Type. In these cases a "umb-overlay" is shown so that the editor can pick which DocType to add, like this:

This works all fine, but when Nested Content is shown inside a EditorService-dialog, the umb-overlay will set it's style to left:xxx px; so that it ends up outside the screen, this is how it looks when clicking "Add Content"

After removing the "left"-style from the umb-overlay the box shows again:

This issue is present only with "Doc Type Grid Editor" but also when for example configuring a "Multi Node Tree Picker" to have the "Open"-button. When opening an Node and trying to choose a DocType for Nested Content it looks like this:

In other words, the umb-overlay is placed to much to the right so that the editor can't choose a DocType. The issue is specially big when the editorService is opening a window that is of type "small".

We've solved this with some CSS-hacks but I guess it would be good to come up with something in Core?

Our solution was to put any umb-overlays to the right using CSS like this but there might be better solutions =D

.umb-editors {
    .umb-overlay {
        left: inherit !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }
}

[nul800sebastiaan]

Just make sure to always mention the Umbraco version you're on please so we can try to reproduce!

[abjerner]

We have experienced this as well, but I haven't gotten around to creating a PR or even creating an issue yet.

I think this is in 8.5, but not in 8.4. But I haven't really tested beyond this.

Umbraco currently uses the <umb-overlay/> directive, which is deprecated. It has some quirks - eg. it isn't positioned correctly when used in infinite editing. I think the the fix should be updating the code to use the newer overlayService or editorService instead.

[nul800sebastiaan]

Good news, I just tested in v8.6 and it's already fixed there:

[abjerner]

@nul800sebastiaan your editor is full size. As can be seen on your screenshot, the overlay isn't fully grid centered, which I guess is also part of the issue.

When using a medium or small editor, the overlay still seems to be off screen. I just tested this with the latest v8/contrib.

If we switch to using the overlayService, I think it will always be horizontally centered based on the overall viewport, whereas I think the idea with the current umbOverlay directive is that it should be positioned relative to the active infinite editor (although it doesn't work). Would that be an acceptable trade off if switching to the overlayService?

[abjerner]

Here is an example on how it will look using the similar itemPicker in the overlayService (as mentioned, the overlay will be positioned in relation to the overall viewport, and not the active editor):

[enkelmedia]

@nul800sebastiaan Sorry, this was on Umbraco 8.4 and @abjerner's screenshare shows the issue that I'm reffering to when the editorService is opened in a "small" window.

[nul800sebastiaan]

Thanks @abjerner - Apparently I didn't know how to reproduce correctly! 👍

[nul800sebastiaan]

Fixed in #7759

[stefankip]

I think #7918 is the same issue and thus duplicate, right?

[abjerner]

@stefankip Yes and no.

It's the same underlying problem, but my PR only fixes this for the grid overlay only, as it doesn't fix the problem with the umb-overlay directive, but instead replaces the use of the directive with the newer overlayService.

I can't really remember for sure whether the problem was also fixed generally for the umb-overlay directive. If not, it would be useful as it would fix the problem globally for the directive. And it may be a lot quicker than replacing all uses of umb-overlay with overlayService.

[enkelmedia]

I've shared a "fix" that works for us here #7918 (comment) and maybe it could be a starting point for something to ship in core.