Issue #2948Opened August 10, 2020by mmotov1 reactions

[Question/Bug]: The image in the cell shifts the content

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, 20201 reactions

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, 20200 reactions

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, 20200 reactions

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.