id	summary	reporter	owner	description	type	status	priority	milestone	component	version	resolution	keywords	cc
14431	Image2 Image Alignment	wesleywesley		"== Steps to reproduce ==

1. Add image2 plugin.

2. Add config setting: 

{{{
 config.image2_alignClasses = ['left-image', 'center-image', 'right-image'];

}}}

3. custom css file with 

{{{
img.left-image, .left-image img {
  float: left;
  margin-right:10px;
  display: block;
}


img.right-image, .right-image img {
  float:right;
  margin-left: 10px;
  display: block;
}

img.center-image, .center-image img {
  margin: 0 auto;
  display: block;
}

}}}


4. Add an image in the editor, set to right aligned.

== Expected result ==

Image should be floating to the right.

== Actual result ==

Image is not floating to the right.

The CSS in the editor around the image is as follows:


{{{
<p><span tabindex=""-1"" contenteditable=""false"" data-cke-widget-wrapper=""1"" data-cke-filter=""off"" class=""cke_widget_wrapper cke_widget_inline cke_image_nocaption right-image cke_widget_selected"" data-cke-display-name=""afbeelding"" data-cke-widget-id=""0""><img alt="""" class=""cke_widget_element"" data-cke-saved-src=""https://pbs.twimg.com/profile_images/604644048/sign051.gif"" src=""https://pbs.twimg.com/profile_images/604644048/sign051.gif"" data-cke-widget-data=""%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F604644048%2Fsign051.gif%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%22%22%2C%22height%22%3A%22%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22right%22%2C%22classes%22%3Anull%7D"" data-cke-widget-upcasted=""1"" data-cke-widget-keep-attr=""0"" data-widget=""image""><span class=""cke_reset cke_widget_drag_handler_container"" style=""top: -15px; left: 10px; display: block; background: url(&quot;http://domain.com/assets/components/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039);""><img class=""cke_reset cke_widget_drag_handler"" data-cke-widget-drag-handler=""1"" src=""data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="" width=""15"" title=""Klik en sleep om te verplaatsen"" height=""15"" draggable=""true""></span></span></p>

}}}

The important thing is the class cke_widget_inline. 

This has display:inline-block and this does not work well together with float:right in the .right-image class. 

4. Fix

To fix it, I had to add this code to my CSS: 

But I don't think any user knows to do that.. 

{{{
span.cke_widget_inline.right-image, span.cke_widget_inline.left-image, span.cke_widget_inline.center-image {
  display: block;
}
}}}

Am I doing anything wrong, or is there a bug with this plugin? 
"	Bug	closed	Normal		UI : Widgets		invalid