Opened 9 years ago

#13048 new Bug

Editor's contentscss and "Image2 plugins" 100% width style not working properly

Reported by: Jirat Arinrith Owned by:
Priority: Normal Milestone:
Component: UI : Widgets Version: 4.4.7
Keywords: Image2 Cc:


I use "Image2" plugin and set "contentscss" to css file (works great!)

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'

Attachments (2)

Screen Shot 2558-03-15 at 6.13.21 PM.png (640.3 KB) - added by Jirat Arinrith 9 years ago.
build-config.js (2.4 KB) - added by Jirat Arinrith 9 years ago.

Download all attachments as: .zip

Change History (2)

Changed 9 years ago by Jirat Arinrith


Changed 9 years ago by Jirat Arinrith

Attachment: build-config.js added


Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy