Issue #2948💬 AnsweredOpened August 10, 2020by mmotov1 reactions

The image in the cell shifts the content

快速解答by Ju99ernaut1

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: Screen Shot 2020-08-10 at 11 59 58 AM

And now with image: Screen Shot 2020-08-10 at 12 00 43 PM

Any idea what it might be and how to fix it?

Answers (3)

Ju99ernautAugust 17, 2020

I'm able to reproduce that behavior with default grid img1

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

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.

Ju99ernautAugust 17, 2020

Probably related to display: table, the grid system uses by default, add this to your grapesjs.init

//...
pluginsOpts: {
        //...
	'gjs-blocks-basic': {
		flexGrid:1
	}
},
//...
mmotovAugust 17, 2020

@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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.