Opened 8 years ago

Closed 8 years ago

#4209 closed Bug (expired)

CKEditor UI not visible in IE7 when the cache is empty and placed in table-layout:fixed

Reported by: Saurabh Owned by:
Priority: Normal Milestone: CKEditor 3.2
Component: General Version: 3.0
Keywords: IE WorksForMe Cc: Erik Kangas

Description

I am using CKEditor in my Asp.Net MVC application, It works fine on all other browsers, but in IE7 editor is not showing.

any Ideas? Kind Regards, Saurabh

Attachments (3)

ckeditor in FF.JPG (22.3 KB) - added by Saurabh 8 years ago.
Editor in Firefox seems fine.
ckeditor in IE7.JPG (17.5 KB) - added by Saurabh 8 years ago.
editor in IE7 nothing is displaying
4209_TC.html (1.0 KB) - added by Garry Yao 8 years ago.

Download all attachments as: .zip

Change History (14)

Changed 8 years ago by Saurabh

Attachment: ckeditor in FF.JPG added

Editor in Firefox seems fine.

Changed 8 years ago by Saurabh

Attachment: ckeditor in IE7.JPG added

editor in IE7 nothing is displaying

comment:1 Changed 8 years ago by Saurabh

Summary: CKEditor Now Working in IE7CKEditor Not Working in IE7

comment:2 Changed 8 years ago by Tobiasz Cudnik

Keywords: IE Pending added
Priority: HighNormal

Can you confirm this with newest trunk from SVN repository ? ? We're about to release a new version which is well tested in all browser (and definitely works in IE7).

Can you also please try to narrow down reproduction code ? Your page may contain scrollbars, or other elements with interfere with the editor. We would like to know what are those elements.

comment:3 Changed 8 years ago by Tobiasz Cudnik

Milestone: CKEditor 3.0

comment:4 in reply to:  3 Changed 8 years ago by Saurabh

Now I am using code from ckeditor nightly

http://download.cksource.com/CKEditor/CKEditor/Nightly%20Build/ckeditor_nightly.zip

still not worked with IE7.

Yes my page contains scrollbars, but no other elements are interfering it. I have the Textarea and I have to save the text in that textarea and I am some javascript on that textarea thats it. Why it is not working with IE7 ? Do we need to changes with patches??

Kind Regards, Saurabh

comment:5 Changed 8 years ago by Frederico Caldeira Knabben

Please attach a sample page to this ticket, so we can reproduce the problem here. It's working in our test pages, and we need to investigate why we have problems with your specific case. Thanks.

comment:6 Changed 8 years ago by Alfonso Martínez de Lizarrondo

Resolution: expired
Status: newclosed

Expired

comment:7 Changed 8 years ago by Erik Kangas

Cc: Erik Kangas added
Keywords: cache table-layout added; Pending removed
Resolution: expired
Status: closedreopened
Summary: CKEditor Not Working in IE7CKEditor UI not visible in IE7 when the cache is empty and placed in table-layout:fixed
Version: CKEditor 3.0 RCCKEditor 3.0

I have had this same issue with the released CKEditor v3.0 code. Here are more details:

  • Only affects IE (testing with IE7 on Win Vista)
  • Does not affect Opera or FF
  • Only seems to happen when the editor is being loaded in a DIV or textarea inside a TD that is in a table with the style "table-layout:fixed"

To Make it happen:

  • Have a page where the CKEditor uses CKEDITOR.replace in the page onLoad.
  • In IE, clear your temporary internet files ... so there is nothing cached at all
  • Refresh the page with the CKEditor on it.

Result:

  • Like in the example JPG.
  • setData immediately after the replace will enter the content and you can edit the content -- however, all of the "chrome" of CKEditor is still invisible.
  • After some editing, the chrome may suddenly re-appear in full glory
  • The issues does not re-appear until the cache is completely cleared again.
  • Once the CKEditor has been cached, the issue doesn't happen. Maybe some race condition in loading?
  • If you change the page width so that the size of the CKEditor changes, it redraws itself and then is fine.

Once again:

  • Removing the style "table-layout:fixed" from the enclosing table also resolves the issue completely.

For example

<table style="table-layout:fixed"> <tr>

<td width=25%> Lorem ipsum! </td> <td width=75%>

<textarea name=editme id=editme></textarea>

</td></tr>

</table>

That should show the issue, if you replace the editme with a CKEditor.

comment:8 Changed 8 years ago by Erik Kangas

More details:

  • If the element being replaced as the id "content", then the new CKEditor will be in a span with the ID "cke_content". So, if you look at this span object in an "instanceReady" callback, its computed Height is zero in IE when the problem occurs. The computed height is normal in other browsers and in IE after the problem goes away. There is apparently some issue with this enclosing span.
  • As anything that forces the browser to re-render the page fixes the issue, I have a work around. For IE, add an instanceReady callback. This callback will check the computed height of the "cke_..." span. If that is "0", then change the display style of that span to "none" and then back to "block". This forces the re-rendering of this area of the page only if it is not showing the span correctly.

CKEDITOR.on('instanceReady', function(e) {

for (var n in CKEDITOR.instances) {

var e = xGetElementById('cke_' + n); if (xHeight(e) == 0) {

e.style.display='none'; e.style.display='block'; }

}

});

Here, I am using the http://cross-browser.com library for xGetElementById and xHeight

function xGetElementById(e) {

if(typeof(e)=='string') {

if(document.getElementById) e=document.getElementById(e); else if(document.all) e=document.all[e]; else e=null;

} return e;

}

and

http://cross-browser.com/x/lib/view.php?s=xHeight

This resolves the problem for me while we await a resolution to the underlying issue.

comment:9 Changed 8 years ago by Frederico Caldeira Knabben

Keywords: cache table-layout removed
Milestone: CKEditor 3.2

Targeting it to the 3.2 for investigation.

Changed 8 years ago by Garry Yao

Attachment: 4209_TC.html added

comment:10 Changed 8 years ago by Garry Yao

Keywords: Pending added

The attached sample page WFM in trunk with IE7/IE8Compat, am I missing any necessary conditions?

comment:11 Changed 8 years ago by Garry Yao

Keywords: WorksForMe added; Pending removed
Resolution: expired
Status: reopenedclosed

Feel free to reopen the ticket on any new findings.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy