Pages in one canvas
You can make use of css properties break-before or break-after. You can maybe create a page break block that you add manually after every page, check out grapesjs-plugin-page-break, or you can break before or after a certain element.Always page break before <h1> element, reference Always page break after <footer> elem...
Read full answer below ↓Question
Hello, not sure exactly where this should go, but here goes.
I'm creating a builder for making long menus for restaurants that will be printed.
My question is, does anyone have any in the wild examples of making a page-size bounding box for each page of a "menu"?
lets say i have 150 types of beer. i'd like to make each page hold a certain amount of content, then jump to a next page, and have that visible in the canvas, basically taking the newsletter demo, and instead of infinite scroll, making a section inside the canvas <body> have multiple "page" sections of a certain size.
If aren't any examples or ideas, where would be a good place to start other than the top level grapejs docs?
Thanks all!
Answers (1)
You can make use of css properties break-before or break-after. You can maybe create a page break block that you add manually after every page, check out grapesjs-plugin-page-break, or you can break before or after a certain element.
Always page break before
<h1>element, reference
@media print{
h1 {break-before: always;}
}
Always page break after
<footer>element, reference
@media print{
footer {break-after: always}
}
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3783
RTE overlapping text when text component set to 100% height
GrapesJS version please help - this may have been solved somewhere but i looked through the issues and found none - there is a doc referenc...
Issue #3296
[QUESTION]: Multiple pages plugin
Hello there! I've seen some discussions about some sort of multiple pages plugin in here. Is this still a thing? Is there something done re...
Issue #2626
[QUESTION] Move component up or down through panel button
Hello i thinking of making a function that move component up or down in the canvas, when a button beeing pushed. Is it possible, and can an...
Issue #1329
Question: How to use same CSS for Multiple pages
Hello Grapejs Team, We've been working on Multi-page Website Builder. For each project there will be multiple html pages with single common...
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.