Columns in Grape Editor are hard to manipulate

[Dahercode]

Hello Aimeos, I added grapejs to my aimeos project (Laravel), and i figured that the editor in the content section (JQADM) has a small issue : After inserting the columns, it's really hard to insert text or any content inside.

Is it a general issue ?

Thank you

[aimeos]

That depends on what you think the problem is. If the column is too small, you could add more padding or add a minimum height for columns: https://github.com/aimeos/ai-cms-grapesjs/blob/master/admin/jqadm/themes/custom.js#L418

[Dahercode]

That depends on what you think the problem is. If the column is too small, you could add more padding or add a minimum height for columns: https://github.com/aimeos/ai-cms-grapesjs/blob/master/admin/jqadm/themes/custom.js#L418

Thank you, it solved the issue. I think it's better to put a bigger padding by default, the 10 px value is nearly impossible to work with (I may be wrong^^)

[aimeos]

A padding has the problem that is may interfere too much with the design of the frontend. Is this change enough for you?

.gjs-dashed .row, .gjs-dashed .col, .gjs-dashed [class^="col-"] {
    min-height: 3rem !important;
}

[Dahercode]

Understood, but it's not enough, i'm obliged to add it in .row .row { display: flex; padding: 10px 0; width: auto; min-height: 3rem; } The div class value is only set to "row" when the columns are not hovered (row gjs-hovered) or not selected (row gjs-selected)

[aimeos]

If you need more space between the row and the columns, we should use the padding instead. Is it enough to increase the row padding from 10px to 20px?

[Dahercode]

Indeed, i think it's enough, but, it still has a weird behaviour compared to adding "min-height". I recorded quikcly the impact (Orginal code / Increasing padding / Adding a min-height)

• Original code (actual) => Nearly impossible to work with.
• Increasing padding by 10px => It creates the col div, you still need to insert something on it, then it generates the columns next to the inserted item.
• Adding min-height => Automatically generates the columns.

[aimeos]

Your screenshots always shows the same image so we can't see what you mean

[Dahercode]

It's a .gif (animated screenshots), you just have to wait some seconds to charge :D

[aimeos]

OK, can you create a pull request with the necessary changes?

[Dahercode]

Sure, can you first choose beetween the last 2 behaviours ? ( With padding or min-height )

[aimeos]

Think, the min-height way would be preferrable

[Dahercode]

Done : https://github.com/aimeos/ai-cms-grapesjs/pull/8