GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

Drag and Drop not working in resized editor window in Google Chrome #1756

Closed muzniousx closed 5 years ago

muzniousx commented 5 years ago

Hi, I developed some components and all works fine in Firefox, Opera browser.

In Google chrome also working fine in fullscreen editor mode only. But, when resizing the editor screen size(custom width & height), drag and drop is not working for all components. The green bar to point the target drop location is also not showing.

In Some times, It only allows only one component to drag and drop and then it blocks all other components. And No errors are shown in console window.

I tried a lot to fix this issue. Cleaned the cache, But, still i couldn't find a solution. I think when resizing the editor window, some listeners are not registering properly in resized editor window in Google Chrome. Can you give me good a solution for this issue? Thanks.

artf commented 5 years ago

Can you explain how do you resize the editor?

muzniousx commented 5 years ago

This is the function i use for resize the window.

function resizeEditor() {
    if ($('.detailview-header').length > 0) {
        $('#MyTemplateEditor').height(($(window).height() - 150 - $('.detailview-header').outerHeight(true) - 70) + 'px');
    } else {
        $('#MyTemplateEditor').height(($(window).height() - 150) + 'px');
    }
    $('#MySettingsContentContainer').height(($('#MyTemplateEditor').height() - 65) + 'px');
}

//This is how i initially resize the editor window

resizeEditor();
$(window).on('resize', resizeEditor);

(the above code works fine in Firefox and Opera browser)

artf commented 5 years ago

Well, this is actually a manual resizing of the container so, if this code is added after editor initialization, I have no idea why it works in Firefox and Opera... but you should add editor.refresh() at the end of your function (probably it would be best to debounce it)

muzniousx commented 5 years ago

Hi, Thanks for your reply. editor.refresh() also didn't work. But, finally the issue was fixed when updating the google chrome and grapesjs-preset-newsletter.

lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.