Nested content not working inside doctype grid editor that is inside a Vorto editor

[Mike Masey]

I'm currently facing an issue in which i have a nested content picker inside of a doctype grid editor that is inside a Vorto editor.

All the package versions versions are up to date.

When i press the (+) button to add a nested content item, the modal appears is off-screen, instead of where the plus button is. This was working in version 0.3.0 of DocTypeGridEditor and NestedContent.

After rolling back and looking at the differences between 0.3.0 and 0.4.0, i found this section of code in nestedcontent.controllers.js. I wonder whether the code that has replaced the jQuery has something to do with it?

// Version 0.4.0 from line 162
$timeout(function () {

    var wrapper = $("#contentwrapper");
    var el = $("#nested-content--" + $scope.model.id + " .nested-content__node-type-picker .cell-tools-menu");

    var offset = el.offsetRelative("#contentwrapper");

    $scope.overlayMenu.style.top = (Math.round(wrapper.height() / 2) + offset.top) - Math.round(el.height() / 2);
    $scope.overlayMenu.style.left = (Math.round(wrapper.width() / 2) + offset.left) - Math.round(el.width() / 2);

});

// Version 0.3.0 from line 155
// calculate overlay position
// - yeah... it's jQuery (ungh!) but that's how the Grid does it.
var offset = $(event.target).offset();
var scrollTop = $(event.target).closest(".umb-panel-body").scrollTop();
if (offset.top < 400) {
    $scope.overlayMenu.style.top = 300 + scrollTop;
}
else {
    $scope.overlayMenu.style.top = offset.top - 150 + scrollTop;
}
$scope.overlayMenu.show = true;

Here is an image to try an help highlight the issue. Has anyone come across this bug before?

[Matt Brailsford]

Hi MMasey,

The code to position the window did change yes as there was a bug whereby nested content items located lower in the editor window had the window open lower and lower to the point it wasn't on screen anymore confusing users.

I must admit, I've not tested it in combination with doc type grid editor so wasn't aware it was a problem. You should be able to play with that area of code to tweak the position, however I can't really see any easy way to approach this that will work for both standard and DTGE based setups (without giving NC a dependency on DTGE which we don't want to do).

If you do figure out a generic solution, please let us know.

Cheers

Matt

[Mike Masey]

Ah yeah, i did come across the issue when i was checking to see if anyone has had the same problem. It is definitely quite a unique situation. Now i know where the issue is i'll see if i can find a fix.

Cheers
Mike

[Matt Cheale]

I also have been having this issue, as highlighted the code to position the overlay menu positions it outside the sidebar and ends up not visible. I've submitted a pull request (#123) that will position is in the middle of the screen using CSS and removes the javascript based calculations.

[Sean Oldfield]

Recently had the same issue, adding the following css moves the select doctype overlay back inside the sidebar to just under the plus icon
.dtge-dialog .usky-grid .cell-tools-menu{ position:static; }

[Matt Brailsford]

Fixed in PR #123

[Daniel Bardi]

Is this on nuget yet?