BUG: Section should be overlapping issue present in grapes js

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

BUG: Section should be overlapping issue present in grapes js

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Answers (1)

Related Questions and Answers

BUG: Performance issue while dragging component to canvas when you have 2k component on canvas

BUG: <> is introduced at the beginning editor.getHtml()

BUG: Lists not working with default RTE

BUG: Symbol styles not synced

Paid Plugins That Match This Issue

Browse Plugin Categories