Issue #2724Opened April 21, 2020by jozue062 reactions

[QUESTIONS] pages in one canvas

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)

Ju99ernaut• April 28, 20202 reactions

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 #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...

3 answersUpdated March 20, 2020

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...

3 answersUpdated September 17, 2019

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...

2 answersUpdated March 4, 2021

Issue #2170

[QUESTION] Custom component - how to set editable to true

Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "t...

3 answersUpdated October 19, 2023

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders