IframeDialog has very small content in CKEditor 4 continued.

[Jakub Ś]

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.

2. 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: contents.style || 'width: 100%;' while in 3.x this was style: contents.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.

[Jakub Ś]

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.

[Jakub Ś]

#12725 was marked as duplicate.

As mentioned in ​https://www.drupal.org/node/2167591#comment-9399499 (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 .