Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Vyacheslav 13 posts 113 karma points
    Oct 24, 2021 @ 18:04
    Vyacheslav
    0

    How to use overlay in another overlay? Why second overlay is locked but first is active?

    I have a custom data type "Table Editor", each cell contains RTE.
    But when I want to add a link from Link Picker (or open edit source code) in this RTE, overlay with code window is locked.
    Link Picker is locked until I click on it, but after click Link Picker is active, but RTE overlay closes.
    Link Picker is locked
    I explored code for these elements in the Chrome Dev Tools and marked an oddity: Different places. Table overlay is deep inside page node. Link Picker overlay is inside "umb-editors" class that is after page node.

    Function for init RTE in controller.js:

        function _editCell(cell) {
        vm.richTextEditor = {
            view: "/App_Plugins/Our.Umbraco.Tables/backoffice/views/tables.overlay.view.html",
            show: true,
            title: "Edit cell value",
            prop: {
                alias: "value",
                label: "",
                view: "rte",
                config: {
                    editor: {
                        toolbar: [
                            "ace",
                            "removeformat",
                            "styleselect",
                            "bold",
                            "italic",
                            "underline",
                            "strikethrough",
                            "bullist",
                            "numlist",
                            "link",
                            "unlink"
                        ],
                        stylesheets: [
                            "/css/Jumpstart.css"
                        ],
                        maxImageSize: 500,
                        mode: "classic"
                    }
                },
                value: cell.value
            },
            submit: function (model) {
                cell.value = model.prop.value;
                vm.richTextEditor.show = false;
                vm.richTextEditor = null;
            },
            close: function (model) {
                vm.richTextEditor.show = false;
                vm.richTextEditor = null;
            },
            error: function (error) {
            }
        };
    }
    


    Overlay layout in editor.view.html:

        <umb-overlay ng-if="vm.richTextEditor.show"
                 model="vm.richTextEditor"
                 position="right"
                 view="vm.richTextEditor.view">
    </umb-overlay>
    


    How can I use overlay in a overlay correctly?
    Why these overlays are in a different places?

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies