search

plone / mockup

A collection of client side patterns for faster and easier web development
http://plone.github.io/mockup/
BSD 3-Clause "New" or "Revised" License
47 stars 93 forks source link

TinyMCE menu dropdowns in modal edit forms are displaced depending on PageScroll #867

Open fredvd opened 6 years ago

fredvd commented 6 years ago

I've just submitted this issue in plone.app.mosaic's tracker as I found it first there, but it might be a more general problem with pat-modal and pat-tinymce and not specific for mosaic.

The editor drop down menu's of a tinymce instance get displaced in a modal on a mosaic editor page when the page is scrolled down. Tested with coredev 5.1.4-dev0

https://github.com/plone/plone.app.mosaic/issues/425

edit_modal_page_scroll_bottom_4

fredvd commented 4 years ago

This issue is not entirely fixed by the commit in https://github.com/plone/mockup/issues/867 .

@cillianderoiste @thet The fix probably works when you have only 1 tinymce pattern active on the page, but when there are multiple tinymce's like on a mosaic page as with https://github.com/plone/plone.app.mosaic/issues/425

The menu items in a tinymce placed in a modal now completely disappear instead of just being displaced.

I've got an easy fix: generate a random string id and append it to the id passed as a ui_container for every instantiated tinymce-pattern. This fixes the issue locally for me in plone.app.mosaic, where the mosiac editor screen already has some (hidden) tinymce's and a tile popup contains three more tinyme fields. 


        if (modal_container.length > 0) {
            var random_id = Math.random().toString(36).substring(2, 15) ;
            modal_container.attr("id", "tiny-ui-container-" + random_id);
            tinyOptions['ui_container'] = "#tiny-ui-container-" + random_id;
        }

        tinymce.init(tinyOptions);
        self.tiny = tinymce.get(self.tinyId);```

I'll create another pull request.