QUESTION: How to control the height of the editor dynamically to avoid clunky scrolling

Question

I've noticed if in the initialise function I set a height it will set based on a specific pixel amount e.g. height: "500px". However if you try to set with a percentage e.g. height: "90%" the editor has no height at all.

Also I'm wondering what is setting the height if nothing is set because it appears to be automatically calculating a pixel amount that consumes the entire page (e.g. 100%).

I actually have the editor wrapped inside a standard page template we have in the back-end of our CMS, and this page template actually has more content in side menu bars which forces the page to become a scrollable page (i.e. the content from the page template always goes below the fold of the screen). This makes the editor function really poorly, because if you want to scroll beneath the editor you have to move the cursor outside of the editor and scroll, and it leads to poor user experience.

I also have a "save" button which submits to a form and this is not part of the editor, so in order to get to the save button you have to again move the cursor out of the editor area and scroll - it's not ideal.

I have considered dropping my page template on the editor and allowing it to go almost full screen if you like, but I still have the issue of the save button needing to be directly below the editor. What is my best option here? I had thought if I dynamically set the height of the editor to say 80-90% that would leave room beneath it but it doesn't work.

Any insight would be greatly appreciated as I have been wrapping my brain on this one for days.

Answers (3)

ahmedderkaoui• May 25, 20211 reactions

try to work with vh instead of px.

eg: give the editor height: '80vh', your navbar height: '20vh'. This way, the vertical scroll will never be shown or needed as long as the sum of all elements's vh ≤ 100

Hope this helps.

samichamoun• May 25, 20210 reactions

try to work with vh instead of px.

eg: give the editor height: '80vh', your navbar height: '20vh'. This way, the vertical scroll will never be shown or needed as long as the sum of all elements's vh ≤ 100

Hope this helps.

thanks this is useful!

artf• May 25, 20210 reactions

This is more a layout issue and not related to the GrapesJS editor itself.

QUESTION: How to control the height of the editor dynamically to avoid clunky scrolling

Question

Answers (3)

Related Questions and Answers

[Question] I added one component named template in the blocks but when i try to drag another components inside this template component ,it will be dragged but after saving it removes all the components inside it. How to avoid this?

[QUESTION] How can I set default tagName

[Question] How to update attribute/properties dynamically from Component Script?

[QUESTION] How to add the button in custom traits

Paid Plugins That Match This Issue

Browse Plugin Categories