🐛 Fix: Section should be overlapping issue present i…

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Version 117.0.5938.134 (Official Build) (64-bit)

Reproducible demo link

https://jsfiddle.net/ap404703/0e5zop1n/

Describe the bug

Example as below

Grapes Js file :-

// Initialize GrapesJS const editor = grapesjs.init({ canvas: { styles: [ "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", "https://unpkg.com/swiper@7/swiper-bundle.min.css" ] }, styleManager: { // Configure the Style Manager clearProperties: 1, }, blockManager: { appendTo: "#block", }, panels: { defaults: [] }, container: '#grapesjs-container', fromElement: true, // Pass true to load the initial HTML from the container storageManager: { // Configure the Local Storage plugin autoload: true, // Automatically load data from local storage on editor initialization autosave: false, // Automatically save data to local storage type: "local", // Use local storage as the storage type

Code SnippetHTML

stepsBeforeSave: 1, // Number of steps/actions before saving to local storage
    }, // You can configure storage options as needed
    // plugins: ['grapesjs-preset-webpage'], // Include any additional plugins you need

});

editor.BlockManager.add('navigations-center-block', {
    label: 'Navigations Center',
    content:'<section class="w-full h-96 flex justify-center items-center"><button class="w-44 h-12 rounded bg-blue-700 hover:bg-blue-900 text-white  text-[10px] ">Contact Us 1</button></section>'
});

editor.BlockManager.add('navigations-left-block', {
    label: 'Navigations Left',
    content:'<section class="w-full h-96 flex justify-center items-center"><button class="w-44 h-12 rounded bg-blue-700 hover:bg-blue-900 text-white  text-[10px] ">Contact Us 2</button></section>'
});


As below HTML file 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Press</title>

    <!-- Include Font Family -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/grapesjs@latest/dist/css/grapes.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="js/tailwind.config.js"></script>
    
</head>

<body>
   <div class="w-full h-screen">
        <div id="block"></div> 
        <div class="border w-2/4 h-2/4 " id="grapesjs-container"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/grapesjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@latest"></script>  
    <script src="grapes.js"></script>
</body>

</html>

CSS file as below 
/* styles.css */
/* Custom styles */
.gjs-editor-cont .gjs-cv-canvas {
    width: 100%;
}

.gjs-editor-cont .gjs-pn-panels {
    display: none !important;
}

.gjs-editor-cont .gjs-one-bg {
    background: none !important;
}

.gjs-blocks-cs {
    background: none !important;
}

.gjs-blocks-cs .gjs-one-bg {
    background: none !important;
}

.gjs-two-color {
    color: #000 !important;
}

.gjs-blocks-cs .gjs-blocks-c .gjs-block {
    min-height: 0 !important;
}

Now, When the user select the "Contact Us 1" button section drag and drop in the grapes js editor it's working perfectly fine but when the second time the user select the "Contact Us 2" button section and drag and drop inside "Contact Us 1" button section. This should not have happened. The section inside section should not be placed.       

### Code of Conduct

- [x] I agree to follow this project's Code of Conduct

Answers (2)

artf• October 12, 2023

@ChiragS-Prajapati you have to use draggable/droppable component properties to control where components could be dragged and what components can be dropped inside.

ClaudeCode• May 17, 2026

Thanks for reporting this, @ChiragS-Prajapati.

The issue with Section should be overlapping issue present in grapes js appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

Section should be overlapping issue present in grapes js

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Answers (2)

Related Questions and Answers

mousePosFetcher in resizer config & change:style listener not working

Inline style overrides ID-based CSS rules

ColorPicker Offset incorrect when Panels are outside of Editor Container

Paid Plugins That Match This Issue

Browse Plugin Categories