Unable to nest <div id="gjs"> into any other tag
What I have done is to just clone this repo, and nest the <div id="gjs" style="height:0px; overflow:hidden;"> within another <div>, so it would be like When I run npm start, I am getting a blank page
Read full answer below ↓Question
It seems that the index.html structure needs to be the following:
<body>
<div id="gjs" style="height:0px; overflow:hidden"></div>
<script ... >
I am not able to nest this div within another div like so:
<body>
<div class="site-content">
<main class="site-main">
<div id="gjs" style="height:0px; overflow:hidden"></div>
</main>
</div>
</body>
Since my custom styles require the presence of the first div and the main, and I've tried updating the container property for the grapesjs.init to no success, I'm asking if this is possible
Answers (3)
What I have done is to just clone this repo, and nest the <div id="gjs" style="height:0px; overflow:hidden;"> within another <div>, so it would be like
<div>
<div id="gjs" style="height:0px; overflow:hidden;">
</div>
</div>
When I run npm start, I am getting a blank page
@fasaas did you specify this in your html?
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
BTW, make sure that your parent div has height:100%
cheers!
If this is not possible, is there a way to explicitly indicate that when I add a new Block into the BlockManager, the container should be a specific container that I can have previously define in index.html and leave the original div at the top level?
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<div class="site-content">
<main class="site-main">
</main>
</div>
</div>
...
E.g. when adding a new block to a specific tag
blockManager.add('whatever', {
label: 'Content Label name',
content: { type: 'my component type name' },
category: 'category name',
component: '.site-main`
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2207
[BUG]: Can't drag component if there is some space on top/left with Mode Absolute
Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See F...
Issue #1770
[Bug] Components with custom tag are not rendered if specified in theme body
Hello I created very simple skeleton of GrapesJS editor. HTML template: Javascript: Result of loading: As you see, component is not rendere...
Issue #1231
GrapesJs ignores <script> tags of templates (updated)
When I include templates inside the <div id="gjs"></div> tags. It appears that GrapesJs ignores the <script> tags, but every other tag like...
Issue #2547
Unable to drag an element if style has bottom or right values
Hi @artf , If any component CSS has bottom or right values , not able to drag them. Values are generating as NaN. Attached the screenshot f...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.