Chrome loading problem (wrong height)

Wed, 07/08/2009 - 22:46

#2

fredjiles

Joined: 14/01/2009

Posts: 2

Re: Chrome loading problem (wrong height)

I am getting the same problem. Any ideas on this? Only happens in chrome and safari so far, but only tested in Firefox 3, IE 8, opera

Thu, 07/09/2009 - 07:18

#3

carsjo

Joined: 10/07/2008

Posts: 8

Re: Chrome loading problem (wrong height)

I've tested it on IE 6, IE 7 and Firefox 3.5 - It all works as expected.

It seems limited to Chrome and Safari (as you point out).

Somehow the rendering at page load is faulty.
Maybe it's a browser-file setting? Since the .NET engine renders the page (HTML) differently depending on the capabilities of the browser.

Fri, 07/10/2009 - 09:30

#4

johndoe

Joined: 10/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

I'm experiencing the same problem. When using a set height of 300px, firefox will calculate the specific iframe (selector: #xEditingArea iframe) to height 265px. However, Google Chrome just sets this same iframe to 100% height. An iframe cannot have 100% height in any browser, it will use it's default height instead. This is exactly what's causing the problem!

This faulty '100%' height is set in /fckeditor/editor/_source/classes/fckeditingarea.js @ line 99. I can't locate where Firefox and IE are getting their correct computed values from, but I expect the problem should be solved there.

Attachments:

Attachment	Size
FCKeditor in Google Chrome	12.58 KB
Computed height in Google Chrome	75.72 KB
Computed height in Firefox	50.48 KB

Fri, 07/10/2009 - 10:33

#5

krappies

Joined: 30/06/2009

Posts: 48

Re: Chrome loading problem (wrong height)

This code works perfect for me in IE 7, FF 3 and Chrome:

<script type="text/javascript">
   window.onload = function()
   {
            var oFCKeditor = new FCKeditor('editor1');
            oFCKeditor.BasePath = "./fckeditor/";
            oFCKeditor.Height = 600;
            oFCKeditor.ReplaceTextarea();
   };
</script>
<body>
   <form method="post" id="myform" name="myform">
      <p>
         My Editor:<br />
         <textarea name="editor1">Initial Value</textarea>
      </p>
   </form>
</body>

Fri, 07/10/2009 - 10:42

#6

carsjo

Joined: 10/07/2008

Posts: 8

Re: Chrome loading problem (wrong height)

krappies wrote:This code works perfect for me in IE 7, FF 3 and Chrome:

<script type="text/javascript">
   window.onload = function()
   {
            var oFCKeditor = new FCKeditor('editor1');
            oFCKeditor.BasePath = "./fckeditor/";
            oFCKeditor.Height = 600;
            oFCKeditor.ReplaceTextarea();
   };
</script>
<body>
   <form method="post" id="myform" name="myform">
      <p>
         My Editor:<br />
         <textarea name="editor1">Initial Value</textarea>
      </p>
   </form>
</body>

At least I'm creating the FCKeditor by using the ASP.NET (2.0) version, with the .DLL as generator

<fckeditor:fckeditor id="FCKeditor1" runat="server" basepath="~/fckeditor/" width="700" height="400" enablesourcexhtml="true" enablexhtml="true" />

Then it doesn't work!

Fri, 07/10/2009 - 12:53

#7

johndoe

Joined: 10/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

krappies wrote:This code works perfect for me in IE 7, FF 3 and Chrome:

<script type="text/javascript">
   window.onload = function()
   {
            var oFCKeditor = new FCKeditor('editor1');
            oFCKeditor.BasePath = "./fckeditor/";
            oFCKeditor.Height = 600;
            oFCKeditor.ReplaceTextarea();
   };
</script>
<body>
   <form method="post" id="myform" name="myform">
      <p>
         My Editor:<br />
         <textarea name="editor1">Initial Value</textarea>
      </p>
   </form>
</body>

This same code isn't working in my case, unfortunaly. I'm using Vista SP1 and Chrome 2.0.172.33

Fri, 07/10/2009 - 16:52

#8

krappies

Joined: 30/06/2009

Posts: 48

Re: Chrome loading problem (wrong height)

Mon, 07/13/2009 - 14:23

#9

johndoe

Joined: 10/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

krappies wrote:I got Vista SP2, but SP1 worked as well, and Chrome 2.0.172.33 and FCK 2.6.4...
Try a different doctype. The example I gave you worked with no doctype specified, but we also use it with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hopefully that will solve it.

Mon, 07/13/2009 - 16:35

#10

johndoe

Joined: 10/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

Tue, 07/14/2009 - 14:21

#11

krappies

Joined: 30/06/2009

Posts: 48

Re: Chrome loading problem (wrong height)

Although this works for me, I noticed it is doing it on eBay. The iframe is not the correct height. I reported this as a bug in Chrome.

Wed, 07/15/2009 - 09:55

#12

johndoe

Joined: 10/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

I've found a work-around:

After FCKeditor is properly loaded, you can use the Javascript API function SetHTML(). No matter what you inject, Google Chrome gets forced to set the causing iframe to it's proper height!

Note: this is not a fix! So the problem still needs further investigation!!!

var fck = FCKeditorAPI.GetInstance('instance_name');
fck.SetHTML('bla bla');

Wed, 07/15/2009 - 16:38

#13

jeffsaracco

Joined: 15/07/2009

Posts: 1

Re: Chrome loading problem (wrong height)

This did the trick for me...

 function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }

Thu, 07/16/2009 - 18:53

#14

spritesoda

Joined: 16/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

Hi, the solution to the problem is to change in fckconfig.js:

FCKConfig.EnterMode = 'p' ;

from 'br'. if you want other browsers to use 'br', add a condition:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (is_chrome) {  

        FCKConfig.EnterMode = 'p' ;   // p | div | br

} else {

        FCKConfig.EnterMode = 'br' ;   // p | div | br

}

Fri, 07/17/2009 - 11:36

#15

johndoe

Joined: 10/07/2009

Posts: 6

Re: Chrome loading problem (wrong height)

SpriteSODA wrote:Hi, the solution to the problem is to change in fckconfig.js:
FCKConfig.EnterMode = 'p' ;

Besided this would be a work-around and not the solution, FCK is configured that way already by default. So it doesn't work.

The problem lies in the height of that specific iframe being configured as 100%, instead of a fixed height in pixels. An iframe with 100% height will only be 100% when the browser is set to run in quirks mode. Since most of use use a more recent doctype - like xhtml strict -, this is a problem that needs to be fixed within FCK itself!

Sun, 07/19/2009 - 16:23

#16

bostitch

Joined: 19/07/2009

Posts: 1

Re: Chrome loading problem (wrong height)

Regarding this workaround:

jeffsaracco wrote:This did the trick for me...

 function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }

Which page does this go on?

Thu, 07/23/2009 - 00:08

#17

curnew

Joined: 23/07/2009

Posts: 1

Re: Chrome loading problem (wrong height)

bostitch wrote:Regarding this workaround:

jeffsaracco wrote:This did the trick for me...

 function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }

Which page does this go on?

This is javascript and should go on every page that contains the editor, like this:

<script language="javascript">
function FCKeditor_OnComplete(editorInstance) {
            var fck_iframe = document.getElementById(editorInstance.Name + '___Frame');
            var fck_editing_area = fck_iframe.contentDocument.getElementById('xEditingArea');
            fck_editing_area.style.height = '100.1%';
            setTimeout(function() { fck_editing_area.style.height = '100%' }, 100);
        }
</script>

a little annoying, but a temp fix none-the-less

Thu, 08/27/2009 - 00:24

#18

jj0wens

Joined: 27/08/2009

Posts: 1

Re: Chrome loading problem (wrong height)

Just as many, I also experience this issue. I too believe this has something to do with the height set on the iframe.

My findings however indicate this is not just the height=100% on the iframe, but also the height of the table holding the EditingArea specified in fckeditor.html.

To get this issue resolved in all the three browsers I tested (IE6SP3, FF3.0.13 and Chrome 2.0.172, I had to make the following changes:

1. Set oFCKeditor->height = 500. This ensured the iframe height would be set to 500

2. Modify fckeditor.html, line 294 making <...style="height: 471px; table-layout: fixed"> from <...style="height: 100%; table-layout: fixed">

3. Modify fckeditor.html, line 313 making <td id="xEditingArea" valign="top" style="height: 471px"> from <td id="xEditingArea" valign="top" style="height: 100%">

I believe the difference of 29 pixels between the height I set and what I need to setup in 2 and 3 accounts for the height of the toolbar (set to basic).

Cheers to all.

JJO

Tue, 10/13/2009 - 13:36

#19

krappies

Joined: 30/06/2009

Posts: 48

Re: Chrome loading problem (wrong height)

http://ckeditor.com/whatsnew

Fri, 10/16/2009 - 14:06

#20

carsjo

Joined: 10/07/2008

Posts: 8

Re: Chrome loading problem (wrong height)

Mon, 10/19/2009 - 09:34

#21

carsjo

Joined: 10/07/2008

Posts: 8

Re: Chrome loading problem (wrong height)

This little jQuery code does the trick, drawbacks: must have on each page that has a FCKeditor, and the timeout would be nice to avoid.

Any ideas?

var iTimer;
   $(document).ready(function() {
      iTimer = setTimeout('FCKeditorIframe()', 1000);
   });
   
   function FCKeditorIframe() {
      clearTimeout(iTimer);
      var isWebKit = navigator.userAgent.toLowerCase().indexOf('webkit') > -1;
      if(isWebKit) {
         $(document).find('iframe').each(function() {
            if($(this).attr('id').indexOf('___Frame') != -1) {
               var currFrame = $(this).contents().find('#xEditingArea > iframe:eq(0)');                  
               $(currFrame).load('load', function() {
                  var currHeight = $(this).height();
                  $(this).css({'height': (currHeight - 17) + 'px'});
               });
            }
         });
      }
   }

Thu, 10/22/2009 - 00:40

#22

dravis

Joined: 22/10/2009

Posts: 4

Re: Chrome loading problem (wrong height)

I'm using FCKEditor version 2.6.5 but was having the same problem. Here's how I fixed it:

In fckeditor.html, I changed line 286 from this:

eInnerElement.style.height = ( oCell.scrollHeight - 2 ) + 'px' ;

To this:

if ( FCKBrowserInfo.IsSafari )
   eInnerElement.style.height = ( oCell.scrollHeight - 19 ) + 'px' ;
else
   eInnerElement.style.height = ( oCell.scrollHeight - 2 ) + 'px' ;

I don't know if this fix applies to CKEditor as well but hopefully this will help some of you. I don't know if this is the best way to fix this problem or if this is considered a hack, but at least for now, it solved the issue on our site.

Thu, 10/22/2009 - 07:23

#23

carsjo

Joined: 10/07/2008

Posts: 8