Iframe dialog height of iframe

When I make an iframe dialog, the dialog gets the right size. However the iframe inside it, only uses the full width, not the full height. Does anyone know how to solve this?

Code used:
CKEDITOR.dialog.addIframe('page_browser_dialog', 'Page browser','url here',750,480,function(){/*oniframeload*/})

Problem occurs in:
Firefox

Fri, 10/16/2009 - 16:33

marcelo.serpro

Joined: 15/10/2009

Posts: 3

Re: Iframe dialog height of iframe

hi emukie,

I'm getting the same problem here. Did you find any solution for it?

Best regards,
Marcelo from Brazil.

Sat, 10/17/2009 - 18:35

garry.yao

Joined: 03/01/2009

Posts: 170

Re: Iframe dialog height of iframe

Hi folks, the fact is that most browsers doesn't render percentage-based height on iframe well, so I would provide a temporary workaround here, I could it helps:

/*
 * @example An iframe-based dialog with frame window fit dialog size.
 */
( function() {
    CKEDITOR.plugins.add( 'myiframedialog',
    {
        requires: [ 'iframedialog' ],
        init: function( editor )
        {
           var height = 480, width = 750;
           CKEDITOR.dialog.add( 'myiframedialogDialog', function ()
           {
              return {
                 title : 'myiframedialog Dialog',
                 minWidth : width,
                 minHeight : height,
                 contents :
                       [
                          {
                             id : 'iframe',
                             label : 'Insert myiframedialog Movie...',
                             expand : true,
                             elements :
                                   [
                                      {
                                         type : 'iframe',
                                         src : 'http://ckeditor.com',
                                         width : width,
                                         height : CKEDITOR.env.ie ? height - 10 : height ,
                                         onContentLoad : function()
                                         {
                                         }
                                      }
                                   ]
                          }
                       ],
                 onOk : function()
                 {
                    // Notify your iframe scripts here...
                 }
              };
           } );

            editor.addCommand( 'myiframedialog', new CKEDITOR.dialogCommand( 'myiframedialogDialog' ) );

            editor.ui.addButton( 'myiframedialog',
            {
                label: 'My Iframe in dialog',
                command: 'myiframedialog',
                icon: this.path + 'images/icon.gif'
            } );
        }
    } );
} )();

Wed, 10/21/2009 - 18:08

marcelo.serpro

Joined: 15/10/2009

Posts: 3

Re: Iframe dialog height of iframe

Thanks, Garry.
I've not tried your solution yet, but I'll do it as soon as possible.
For now, I simply changed the theme from Kama to V2, which does not implement a iframe with "height:100%"

Best regards,
Marcelo from Brazil.

Thu, 01/07/2010 - 18:33

tylerdurd

Joined: 06/01/2010

Posts: 3

Re: Iframe dialog height of iframe

Will be there a fix for this ?

Tue, 01/26/2010 - 17:54

tfluehr

Joined: 26/01/2010

Posts: 9

Re: Iframe dialog height of iframe

Here is a quick fix I came up with:

This is working in IE8 and FF3.6. I haven't tried other browsers yet. Still at the beginning of my evaluation of CKEditor before we purchase a license.

just add the function as the last parameter (or the line of code if you are already using the function)

        CKEDITOR.dialog.addIframe('iframe_Dialog', 
                'Iframe, 
                url, 
                450, // width 
                370, // height 
                function ()
                    {
                        // fix for bug in CKEditor where iframe height is not 100%.
                        // FYI - this is Prototype.js based code
                        // it is basically finding the iframe element and then finding it's ancestor with a class of "cke_dialog_page_content" and setting it's height to 100%.
                        $(this.domId).up('.cke_dialog_page_contents').setStyle({ 
                            height: '100%'
                        });
                    });