GrapesJS Issues

Search parsed GitHub issues, see highlighted answers, and open the original discussion when needed.

3464 issues found

#2587February 19, 2020by PKRekha3 answers
3 reactions

Custom component, Need 4 Columns at a time when I drag

Hello @artf, I have created custom component, where I need to display 4 columns with specific style when I drag a component to the canvas and in each column again I have some html content with specific styles and again i have to give user to edit the content or image but not the styles. Can I have a example where anyb...

pouyamiralayi

@PKRekha you can prevent the styling by setting `stylable property to false` and for having 4 instances of your component type, just go like this: Cheers!

Jogai

Please adjust title and follow the contents of the issue template

PKRekha

Hello @artf , I have created custom component, where I need to display 4 columns with specific style when I drag a component to the canvas and in each column again I have some html content with specific styles and again i have to give user...

#2586February 19, 2020by liudmyla-schastlyvets2 answers
0 reactions

[Question]: How update style manager panel using few devices and custom css class

There is a custom class added to simple grapesjs project: If there is no devices and user adds the class into the selectors field Settings sector is updated its font-size property correctly. <img width="1440" alt="Screen Shot 2020-02-19 at 2 33 50 AM" src="https://user-images.githubusercontent.com/32596493/74790527-7b...

artf

Unfortunately, this is due to how getComputedStyle works, which returns resolved values, so by using rem instead of px "confuses" the value. At the moment I don't have any plan on fixing this issue but I'd really appreciate a PR or at leas...

artf

This should be fixed in the latest release https://github.com/artf/grapesjs/releases/tag/v0.18.1

#2585February 18, 2020by MariusDK1 answer
0 reactions

Countdown warning

I have a countdown on my custom trait with the type datetime-local. When i click the element this issue appears. My code: This happens also for your countdown: https://jsfiddle.net/apaoa5o2/14/

artf

The same as https://github.com/artf/grapesjs/issues/2615

#2584February 18, 2020by MariusDK2 answers
0 reactions

Set a button from Component settings active on click

So i made a custom countdown with a button The button set the countdown but i want to make the button active like other elements on click. my code:

MariusDK

@artf please help

artf

Unfortunately, the default button type is made to execute only one command, so if you have to do something fancy I'd suggest you to create your own trait https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type

#2583February 18, 2020by MariusDK3 answers
0 reactions

Breakpoints don't match media query in canvas

Hey @artf I have multiple breakpoints The problem is that when i am a resolution (set using the icons) like 411 (mobile) not always the canvas show the style of the elements in that resolution. Canvas use the media query of the tablet and not the resolution that is set from the device manager for mobile. Ex: I am on 4...

MariusDK

@artf please help

artf

Hi @MariusDK I'm not really sure if I got your problem, can you create a little online demo to show better the issue? Maybe you're talking about the difference between the canvas size and the actual media query in CSS? In that case, you ca...

no-response[bot]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...

#2582February 18, 2020by ayana301 answer
2 reactions

create a new button in the panel manger

I want to add a new button after the settings icon. and I used the following code to create the button.but its not working var panelManager = editor.Panels; var newButton = panelManager.addButton("myNewPanel", { id: "myNewButton", attributes: { title: "Edit Menu", class: "fa fa-sort-desc" }, active: true });

pouyamiralayi

#2350 comment

#2581February 18, 2020by Jogai3 answers
0 reactions

[Bug]: How to use components

Using GrapesJS 0.15.10 I cant get the components to work the way I intent. Its probable me, so if its a question, feel free to adjust the title of the issue. (its a follow up of https://github.com/artf/grapesjs/issues/2195) I've made a pen (hope thats ok, didnt see the fiddle templates) for my example: https://codepen...

pouyamiralayi

Hi @Jogai you must also specify the `data-gjs-draggable on the <td>`: Cheers!

Jogai

Thanks. At least thats an improvement, but still the other properties are not taken into account, and if you try tro drag it (since the drag arrows still show up) it throws an error and then the whole editor is in a broken state. I updated...

Jogai

Updated the example. Its sort of a followup on https://github.com/artf/grapesjs/issues/2195 My assumption is wrong that draggable needs data-gjs- prefix, because the html part without using component doesnt have that either. Still the chil...

#2580February 18, 2020by MichaelNino1 answer
1 reactions

Bootstrap 4

How does GrapeJS editor associate Bootstrap 4 in order to output a responsive page?

pouyamiralayi

blocks-bootstrap4

#2579February 18, 2020by ahmeds633 answers
3 reactions

[Bug]: Blocks icons & font size too small to read

Hi, I am using grapesjs webpage preset plugin to create the webpage builder. But as you can see the icons and font size of the blocks is too small. What could be the issue? They show perfectly fine in the demo here: https://grapesjs.com/demo.html see the size comparison from my local and demo. <img width="233" alt="Sc...

artf

Just fix them with CSS

ahmeds63

For some reason the problem was with embedding the GrapesJS editor within a form that was itself enclosed by bootstrap columns. So the space was tight and GrapesJS stylesheet is using rem font unit for fontawesome icons which sets the font...

ahmeds63

I am facing issue again with the icon sizes of three blocks check the screenshot. As you can see tooltip, custom code and typed have huge icons and they are not matching the normal size of other icons. <img width="254" alt="Screenshot 2020...

#2577February 17, 2020by dskarasev1 answer
1 reactions

[QUESTION] How do I block the insertion of a block inside another block?

Please tell me how do I prevent inserting a block inside another block? I use the editor to create the internal structure of an article for a WEB site. Grapejs building blocks are not used. All custom blocks are added via the configuration editor.BlockManager.add I will be grateful if you can tell me how to do that. T...

pouyamiralayi

@dskarasev you can define custom component type and control the dragging using `draggable` property: Cheers!