How to place a component at the end of the canvas.
Question
How can I put my footer at the end of the canvas?
I want the editor to not allow placing a block/widget below the footer.
example
<!-- only allow dragging/placing of widgets here -->
FOOTER
<!-- Should not have blocks/widgets below this -->
Answers (3)
You can use something like this
const footer = '<div style="padding: 100px">My footer</div>';
editor.getWrapper().getEl().insertAdjacentHTML('afterEnd', footer);
@artf Do we have something like removeAdjacentHTML() editor.getWrapper().getEl().removeAdjacentHTML('afterEnd', footer); because when we used it keeps duplicating every after you reload the window. -------------- I'm looking for a way to solve this but no luck :( Seems like a bug?
Do we have something like removeAdjacentHTML()
getEl() gives you the HTMLElement instance so insertAdjacentHTML is from DOM API, not GrapesJS
it keeps duplicating every after you reload the window.
... can you create a reproducible demo?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #994
how to make sure block is dropped only at the top level
For example I have two blocks A and B that I want to drop to the editor canvas. But sometimes the block that dropped later become the child...
Issue #1814
[Question]: How to fire event which triggers component:selected with my component
I want to select my component whenever it is dragged from blocks to canvas and rendered, I have tried with registering events on component:...
Issue #1831
[Question] How to run command for a block component?
I'd like to do something like this. so once a user drops the test component into the canvas, I'd like to open up asset manager modal where...
Issue #568
Resize blocks with mouse?
I noticed that in the current demo it is only possible to resize most blocks using the property editor, not by dragging anchors on the bloc...
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 →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.