BUG: Couldnt Resize image

[yashvi2026]

GrapesJS version

• [x] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome

Reproducible demo link

https://codepen.io/Harshsne/pen/YPXdgmj

Describe the bug

How to reproduce the bug?

1. upload an image
2. change it to mobile view
3. resize the image

What is the expected behavior? When manually changing width and height in style manager ,the image is resized.

What is the current behavior? couldn't resize the image

Reason would be !important is not added when resizing image in canvas , so the original styles are not overridden.

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[mosh-tudor]

@yashvi2026

That's because of your custom CSS code.

Remove this part:

styles: `.image{max-width:100%;}@media (max-width: 480px) {.image {display: inline-block;height:auto !important;width:100% !important;max-width:100%;}}`,

from editor.BlockManager.add('image', {

[artf]

I confirm the component resizer doesn't account for !important right now, but I'd follow, more or less, what @mosh-tudor suggested.

You don't need to remove the entire styles, as my guess is what you need, but I don't see the point of having !important there. If you need !important there, probably the problem is outside the image component.

[yashvi2026]

I need to use !important in my style. I've noticed that in other components, when !important is included in the default styles, the styles added through the style manager also include !important to ensure they override the default.

So, when the style is changed manually in the Style Manager, !important is added. In the same way, when resizing the component, the styles should also be added with !important, right?