id	summary	reporter	owner	description	type	status	priority	milestone	component	version	resolution	keywords	cc
13048	"Editor's contentscss and ""Image2 plugins"" 100% width style not working properly"	Jirat Arinrith		"Hi! [[BR]]
I use ""Image2"" plugin and set ""contentscss"" to css file (works great!)[[BR]]


'''The issue happens when''' I create simple ""image-fullwidth"" class style, and apply it to the image with the Style dropdown. The editor doesn't preview it as 100% full width, instead showing original size (aligning and other styling work great). Please note that there's no problem on the front website, the image is displayed 100% width correctly.

I used dev tool to dig it and I've found the class '''.cke_widget_inline''', on <span> element that wraps the image, has ""display: inline-block"". Try changing it to ""block"" solves half of the problem, image is displayed 100% width now. However, it doesn't respect image's height. (I remove height from image anyway so that it won't look disproportionated).

'''Browser & OS''': Chrome version 41.0.2272.89 (64-bit) / OS X 10.9.5

'''Build Config''': 

{{{
var editor = CKEDITOR.replace(controlID, {
    height: 400,
    uiColor: '#fafafa',
    extraPlugins: 'image2',
    image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
    image2_captionedClass: 'image-captioned',
    removePlugins: 'save,newpage,preview,print,forms,find,selection,spellchecker,bidi',
    removeButtons: 'SelectAll,Scayt,Subscript,Superscript,Language,Flash,Table,Iframe,Font',
    contentsCss: '/admin/styles/editor.css'
});
}}}"	Bug	new	Normal		UI : Widgets	4.4.7		Image2