The image in the cell shifts the content
I'm able to reproduce that behavior with default grid But when I turn on flex-grid it functions as expected Probably have to replace all previous instances of the component that use display: table, but I don't think that is necessary since your solution works.
Read full answer below ↓Question
Hello! I Have an issue, when adding an image in cell, the neighbors cell content is 'jumping' to the bottom. Actually this issue not only with image, but also with video, links etc.
Here is how it looks without image:

And now with image:

Any idea what it might be and how to fix it?
Answers (3)
I'm able to reproduce that behavior with default grid

But when I turn on flex-grid it functions as expected

Probably have to replace all previous instances of the component that use display: table, but I don't think that is necessary since your solution works.
Probably related to display: table, the grid system uses by default, add this to your grapesjs.init
//...
pluginsOpts: {
//...
'gjs-blocks-basic': {
flexGrid:1
}
},
//...
@Ju99ernaut thanks for reply, but unfortunately it didn't help. I managed to solve this issue by overriding default Cell component. I have added
defaults: {
...defaultModel.prototype.defaults,
//...
style: {
'vertical-align': 'top',
},
}
But probably I'm doing something wrong
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5263
Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo...
Issue #5320
Upload Image or Asset is not triggering on File/Image selection
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 Reproducible demo link none De...
Issue #4529
When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 104.0.5112.101 (Official Build) (arm...
Issue #3806
Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.