froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.3k stars 674 forks source link

Image box resize misaligned #4426

Closed NordicLight closed 2 years ago

NordicLight commented 2 years ago
Expected behavior.

We are upgrading from version 2 to version 4 and in the new version the image resize frame is misaligned if fullPage equals true (please see picture). In version 2 this is working fine independent on the fullPage option.

editor = new FroalaEditor('#froala-editor', { fullPage: true, iframeStyleFiles: ['https://cdn.jsdelivr.net/npm/froala-editor@4.0.9/css/froala_style.min.css'] });

The blue resize box seems to be always misaligned with some 20px so is there an element we can add a simple css styling to fix this?

Actual behavior.

The blue resize box should wrap the image

Steps to reproduce the problem.

Unfortunately we cannot recreate this in JSFiddle. Our solution is running within a iFrame from Atlassian so it could be that this causes the problem.

Editor version.

4.09

Browser.

Chrome latest

Screenshot 2022-03-11 at 08 58 05
NordicLight commented 2 years ago

After beeing in contact with support the fix is to add below css

.fr-image-resizer { margin-top:40px; }

NordicLight commented 2 years ago

After beeing in contact with support the fix is to add below css

.fr-image-resizer { margin-top:40px; }

offlead commented 2 years ago

The margin-top of 40px is only working on wider viewports. If the viewport has been sized down narrower, the resizer shifts upwards more. It seems like the top value is miscalculated, or is being affected by something.

Screen Shot 2022-06-08 at 1 02 23 PM Screen Shot 2022-06-08 at 1 03 25 PM