BUG: Error on resize image.

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Brave Browser Last version

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

Opens the demo page.
Puts an image.
Double click to select image.
Set width to 100%.
Set height to auto or click on the x in height property.
Resize image, you will see that width keeps in % and height is calculated in pixels
Click on the preview eye
See that the image is flattened.

What is the expected behavior? Resize algorithm should calc in pixels instead of mix them

What is the current behavior? Resize function are keeping % as main css unity and calculating the height with pixels, but, when we click in the preview button, the size of column changes, so, the width in % steel working, but the height in pixels is broken.

Check the video with the bug happening: https://www.loom.com/share/f2ed011b207a4e5fb2ac916c94ab0a5b

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (3)

artf• July 18, 20220 reactions

Hi Ronaldo, I'm not sure if there is a simple way to fix this behavior globally for all use cases as you're resizing the image for both sizes and not only the width (in that case the height wouldn't change). What I can suggest trying is to extend the image component with this option for resizable

resizable: { ratioDefault: true, keepAutoHeight: true }

Let me know if that works for you

gustavohleal• July 18, 20220 reactions

Hi @artf. One way we thought to fix this for our use case based on our users is to change the units for width and height always together. That means when the user changes the width from pixels to %, for example, the height will also be changed to %. Is there a way to do this? Also, how can we change the resizer to use % as the default unit?

ronaldohoch• July 18, 20220 reactions

Let me know if that works for you

Hi Arthur, these configuration didn't make any changes to the image, it keeps setting the height with px instead of auto, as property keepAutoHeight suggest

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

BUG: Page update event doesn't fire

BUG: GrapesJS v0.21.5 Doesn't Work in NodeJS (Headless)

BUG: component resets attribute values on updating traits ( first time only )

BUG: Component disappears when we select all the inner text and use backspace. Link component disappears even when we try to update the text.

Paid Plugins That Match This Issue

Browse Plugin Categories