GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

569 issues found

๐Ÿ” canvas
#1037April 12, 2018by dsgh2 answers
0 reactions

[Bug] Devices with a percentage width not supported

version: 0.14.8Steps to reproduce the bugUse the grapesjs-blocks-bootstrap4 plugin.Use the index.html example there - Keep the default devices (which include one defined as 100%)Add any block with classes (eg Container)Click that added block in the editor canvas.This results in an error: Uncaught DOMException: Failed...

maxtacco

This is probably related to https://github.com/artf/grapesjs/issues/896. I guess the logic should be adjusted to handle different types of units, i.e px, em, % etc.

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#999April 3, 2018by maha83port2 answers
0 reactions

how to get the canvas wrapper rows, columns & controls details within the JSON data format?

Hi, Thanks for your plugin. how can i get the dropped controls, rows & columns information like json data while click the save button. Herewith i have attached my code. kindly do the needful?

artf

https://github.com/artf/grapesjs/wiki/API-Editor

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#994April 3, 2018by crazyxhz3 answers
3 reactions

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 of existing block. That is A>B layout. But I want to force the blocks can only be the sibling level.eg. A+B How can I do that? Maybe component:add event?

crazyxhz

@anand-gopinath cool~ work like a charm. Now I found many data attributes usage.... It is a very good framework but the doc is lag behind...

anand-gopinath

@crazyxhz : You can do it by adding data attributes to the content "data-gjs-droppable='.className'", For ex https://jsfiddle.net/wswvuvab/2/

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#986March 29, 2018by nojacko2 answers
2 reactions

[BUG]: Exported CSS cannot override body's background-color

When a body background style is defined in the style option of the init function it's not possible to override. Given the style: After changing the background-color in Grapes, the CSS output is: Due to the ordering, the original colour will take precedence when used. While not necessarily an issue, the repetition of b...

artf

Thanks James, we already aware of it #552 but unfortunately not yet provided any fix :/ The main problem is that GrapesJS doesn't handle well body/wrapper styling and so, as a result, we have the body coming from 3 different spots:from pro...

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#981March 26, 2018by theleoni2 answers
0 reactions

[Question] Set "production" mode

Hi. Like the "Preview" mode, i'm like to show only the canvas (without bars on the side/top), without the eye icon at corner. Has any "production" mode or something like this? It's the editor.getHtml() close to this?

artf

No, there is no "production" command, but you can create easily one by checking the Preview.

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#973March 21, 2018by ryandeba3 answers
0 reactions

[Question]: Doctype in the canvas iframe

Hey @artf, I noticed the canvas iframe doesn't appear to have any doctype set on it, which causes it to be in quirks mode. Is this intentional? I'd like to set it to <!DOCTYPE html>, but doing so causes some positioning issues that you can see in this screenshot and demo. Would you be open to a pull request that would...

ryandeba

This has suddenly become less relevant to the project that I'm working on, so I'm closing it for now.

peakrams

I am interested in a possible solution for this issue. For now I've worked around it by putting custom CSS for those quirks that have a solution via CSS, but the ability to use a DOCTYPE would better, I think.

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#969March 21, 2018by alimajed932 answers
0 reactions

[BUG] Video block - Loop option

Hello everyone, I noticed that when you drag and drop a video block to the canvas, choose youtube, add the correct video ID and check the loop option, it doesn't work as expected. It works well for HTML5 and Vimeo though. The url changes when checking this option adding loop=1: https://www.youtube.com/embed/5Q80bhJYTI...

artf

Seems like the loop is broken and works only with playlist enabled https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work I'll add it to the loop parameter

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#966March 21, 2018by faizansaiyed3 answers
8 reactions

[QUESTION] How to load external CSS file into Grapes Editor?

Hey, During my editor = grapesjs.init(), I want to load an external CSS file into the canvas using @import url(...). So when I use my custom components which are using those external CSS stylings, should render properly. Also, those URL should include in editor.getCss(). How can I do that? Thanks in advance.

chapterjason

https://github.com/artf/grapesjs/issues/195 https://github.com/artf/grapesjs/issues/473 https://github.com/artf/grapesjs/issues/444 https://github.com/artf/grapesjs/issues/66 Here are some solutions, please search next time before open an...

faizansaiyed

Thanks for the help. This works perfectly. I tried searching issues with @import query, my bad.

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

#965March 20, 2018by mandarinobellino3 answers
1 reactions

Unwanted css after refreshing page

After integrating grapes to my platform a problem comes when, after refreshing the page, I click inside an elements : this one gets the style border: 3px solid rgb(0, 0, 0); This issue goes on with every type of element I've insert in the canvas and it shows only on the first element I click after refreshing the page....

francesca-cicileo

I'm having the same issue, when using the grapesjs-preset-webpage plugin. Is there a CDN for that plugin so that I can create a demo on jsfiddle for you?

artf

@mandarinobellino I can't reproduce it by using the official demo (uses the latest version). Do you use the latest version? Are you able to reproduce a live demo?

artf

@francesca-cicileo you can use this one https://unpkg.com/grapesjs-preset-webpage

#958March 16, 2018by rajatkumcom3 answers
1 reactions

Unable to create a popup by using bootbox or any other way.

Unable to create bootbox popup. Below is my code:- var blockManager = editor.BlockManager; blockManager.add('design', { label: 'Design', content: { script: "bootbox.alert('Hi'); console.log('the element', this)", // script: function () { // bootbox.alert({ // title: 'A custom dialog with buttons and callbacks', // mes...

rajatkumcom

Got my answer- I have used parent keyword. parent.bootbox.alert('Hi');

rajatkumcom

lock[bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.