Issue to create a "2 columns" block
Question
Hi, Have a new problem, i'm following the tuto and i want to create the block "2 columns" (or more). I try to use (and understand, that's why i don't want to use grapesjs-blocks-basic) this part of code :
blockManager.add('the-row-block', {
label: '2 Columns',
content: '<div class="row" data-gjs-droppable=".row-cell" data-gjs-custom-name="Row">' +
'<div class="row-cell" data-gjs-draggable=".row"></div>' +
'<div class="row-cell" data-gjs-draggable=".row"></div>' +
'</div>',
})
But i don't know what i need to do in the class ".row" and ".row-cell" to make this example work...
I try some styles but nothing appears and it's impossible to drag something inside but the elements exist in the layers panels.
Thanks for help!
Answers (2)
You should add the proper style to see something, try with something like this
blockManager.add('the-row-block', {
label: '2 Columns',
content: `
<div class="row" data-gjs-droppable=".row-cell" data-gjs-custom-name="Row">
<div class="row-cell" data-gjs-draggable=".row"></div>
<div class="row-cell" data-gjs-draggable=".row"></div>
</div>
<style>
.row {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
padding: 10px;
min-height: 75px;
}
.row-cell {
flex-grow: 1;
flex-basis: 100%;
padding: 5px;
}
</style>
`,
})
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #511
Cannot edit the content after update it via block manager API
Hello @artf sorry for my last issue, I must create a new issue, my problem is got error like this EDIT : sorry i just fixed my last issue w...
Issue #1574
Question, Block content from file
Hi, this is not really an issue but more a question. I'm currently using custom blocks in my GrapesJS editor. This is how I create them : I...
Issue #1624
replace html issue
I defined new forum block like this. I want to replace resource class with ajax response html. Currently I did it like this. The problem is...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.