Opened 10 years ago

Last modified 9 years ago

#11034 confirmed Bug

IframeDialog has very small content in CKEditor 4 continued.

Reported by: Jakub Ś Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0 Beta
Keywords: Cc:


This is the continuation of ticket #10610.

There are two methods of adding iframedialog to editor:

  1. CKEDITOR.dialog.addIframe method which is used when you only want to have iframe in dialog. The height of iframe (or rather wrapping div) was fixed in #10610.
  1. There is also possibility to add iframe to dialog (sample code below).This method is used when you want to have something more in dialog except for iframe. Furthermore this method isn't fixed by #10610. It works when you define width and height in pixels but doesn't when you define % for iframe dimentions.
    ontents :
                                 id : 'iframe',
                                 label : 'some label...',
                                 expand : true,
                                 elements :
                                             type : 'iframe',                                       

To summarize: adding iframe as contents and setting height to 100% will result in small iframe.

Why this is happening: Div surrounding iframe has height auto and all elements inside it (when you define % for iframe) are % so the wrapping div will never get dialog height in this case.
Please go to: ckeditor4\plugins\dialog\plugin.js
Line 1039
In CKE 4.x this line is style: || 'width: 100%;' while in 3.x this was style: || 'width: 100%;height:100%;'. Bringing back height fixes this issue.

Ticket #10610 didn't involve fixing dialog plugin but iframedialog plugin. As discussed with @fredck, fix from #10610 did its job in 50%. It should be checked why doesn't it work for second case and if something can be done about it.

I’m attaching sample plugin for testing.

Attachments (1)

iframe-fit-size-n.7z (1.7 KB) - added by Jakub Ś 10 years ago.

Download all attachments as: .zip

Change History (3)

Changed 10 years ago by Jakub Ś

Attachment: iframe-fit-size-n.7z added

comment:1 Changed 10 years ago by Jakub Ś

Status: newconfirmed

To use the plugin

  1. Put it in plugins folder (you need version with iframedialog plugin for it).
  2. Add below code on page
    var editor = CKEDITOR.replace( 'editor1', {	
    extraPlugins : 'iframe-fit-size-n'
  3. Please note that plugin uses url to replacebyclass.html sample. You need to adjust the URL to what you have.

comment:2 Changed 9 years ago by Jakub Ś

#12725 was marked as duplicate.

As mentioned in (which is why #12725 was created) it is also possible to set .cke_dialog_ui_vbox{height: 100%;} in sites/all/libraries/ckeditor/skins/moono/dialog.css .

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