Ckeditor4: Image overflow of inline editor

[lvalladares]

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)

1. Setup a inline area with enhanced image,
2. 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]

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]

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]

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

[ywang04]

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]

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

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