Image overflow of inline editor

lvalladares commented 7 years ago

Are you reporting a feature request or a bug?

Bug: When you add an image using the inline editor and you set alignment at left or right the image appear outside the editor, it overflows because the float css property

Check if the issue is already reported

Didnt find

Provide detailed reproduction steps (if any)

Setup a inline area with enhanced image,
Add an image at the END of the area and select alignment left

Expected result

The inline area should expand to hold all the image

Actual result

The image overflow outside the editor as you may see here: http://imgur.com/a/TBkkx

Other details

Browser: Chrome
OS: Linux
CKEditor version: 4.7
Installed CKEditor plugins: a11yhelp, about, autocorrect, basicstyles, blockquote, btgrid, clipboard, colorbutton, divarea, elementspath, enterkey, entities, floatingspace, format, horizontalrule, htmlwriter, image, indentlist, justify, link, list, magicline, maximize, oembed, pastefromword, pastetext, removeformat, resize, scayt, showborders, sourcearea, specialchar, stylescombo, tab, table, tableselection, tabletools, toolbar, undo, uploadimage, wsc, wysiwygare

msamsel commented 7 years ago

Hi,

I'm tested this situation it here: https://cdn.ckeditor.com/4.7.1/full-all/samples/old/inlineall.html and all images remain inside editors. Could you prepare code snippet on some codepen.io, jsfiddle.net, etc. showing this issue?

lvalladares commented 7 years ago

It does happens in you link you gave to me, i will tell you the steps:

1.- Select an area where you can add an image (for example last in the first row) 2.- Open the add imagen dialog, put the link to any image (for example). At the end of the image dialog you have to set Alignment to Left or Right (this is important) 3.- Watch the image overflowing outside the shadow background of the editor

Here is the codepen too: https://codepen.io/anon/pen/MvpXNe select the text and see how the image overflows outside the box.

Thanks!

msamsel commented 7 years ago

Ok I see now. I haven't check it at the bottom of the editor.

ywang04 commented 7 years ago

I faced the same issue when narrowing down the page to small size like on the iphone 5 or 6. Is there any solution or settings to fix the overflow issue? Thanks a lot.

tisdall commented 5 years ago

You can fix the problem with the "clearfix" hack:

.cke_editable_inline::after {
  content: "";
  display: block;
  clear: both;
}

ckeditor / ckeditor4