Opened 15 years ago

Last modified 13 years ago

#2848 confirmed New Feature

suggestion: make hidden element actually hide in IE too, x-browser behavior

Reported by: Paul Moers Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: IE HasPatch Cc: Andrew


I think it's a good idea to make the behavior of hidden element the same in all browsers. This actually is doable in IE so I have found after lots of searching:


FCK.EditorDocument.execCommand('RespectVisibilityInDesign', true, null);

makes display:none and visibility:hidden to be respected in editable documents (contentEditable=true).

(Setting the second parameter to false instead of true will disrespect visibility, the default behavior of IE; and setting it to null will toggle the option.)


Attachments (1)

replacebycode2.html (2.3 KB) - added by Jakub Ś 13 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 15 years ago by Garry Yao

Keywords: IE Pending added; display none visibility hidden respected contentEditable behavior removed

Thanks for the great hack! I think it's originally designed for plug-in developers, it works for hidden style but not hidden field though.

comment:2 Changed 15 years ago by Alfonso Martínez de Lizarrondo

But in this post you state that it causes lots of flicker, so if that's true then I don't think that it's a good idea to enable that command, as most of the people won't use hidden elements and they will note the bad behavior.

Or was that problem caused by something else?

comment:3 Changed 15 years ago by Paul Moers

It was caused by toggling the display of a 'mouseover control element' in the editingArea onmouseover of an object (a plugin I'm developing), so this should be no problem.

comment:4 Changed 15 years ago by Alfonso Martínez de Lizarrondo

Keywords: Confirmed added; Pending removed

As long as it doesn't break anything it can be good to support it to avoid showing data in design mode that isn't available in the final page or other browsers.

comment:5 Changed 14 years ago by Alfonso Martínez de Lizarrondo

Cc: Andrew added
Keywords: HasPatch added
Milestone: CKEditor 3.4

#5652 has been marked as dup

comment:6 Changed 14 years ago by Garry Yao

Milestone: CKEditor 3.4

Now that we could achieve this with the protectedSource config with no side effects.

comment:7 Changed 14 years ago by Marcos Wright Kuhns

Could someone explain how to use protectedSource to force IE to RespectVisibilityInDesign? Using, you can still see this bug in IE by pasting the following into source mode, then switching back to WYSIWYG.

  <span style="display: none;">hidden</span>
  <span style="visibility: hidden;">world</span>

I would expect only "hello" to be shown, yet in IE8, as of CKEditor 3.4.1 "hello world" is displayed.

If I open up the Developer Tools in IE8 and run the following JavaScript, things display as they should unless you toggle into & out of Source mode:

CKEDITOR.instances['editor1'].document.$.execCommand('RespectVisibilityInDesign', true, true);

comment:8 Changed 13 years ago by Jakub Ś

#8535 has been marked as dup.

comment:9 Changed 13 years ago by Jakub Ś

Keywords: IE6 IE7 added; IE removed

The bug seems to occur only in IE7 and IE6.

I have attached modified replacebycode sample which tries to workaround the problem. This is the best I could came up with:

function doSth(editor){										
editor.document.$.execCommand('RespectVisibilityInDesign', true, true);
var imgArray = window.document.getElementsByTagName('iframe')[0].contentWindow.document.images;					
	for (var i = 0; i < imgArray.length; i++) {
		var obj = editor.document.getById(imgArray[i].id); 
var editor = CKEDITOR.replace( 'editor1' ,{});
editor.on('mode', function(evt){
		evt.editor.document.$.execCommand('RespectVisibilityInDesign', true, true);

The code fired on mode change helps to hide images when switching from source to wysiwyg but the problem is that they are visible for a second which is not very nice.

As discussed with @fredck the only way to fix it is having RespectVisibilityInDesign included in the source code.

Changed 13 years ago by Jakub Ś

Attachment: replacebycode2.html added

comment:10 Changed 13 years ago by Jakub Ś

Keywords: IE added; IE6 IE7 removed

Little update:

Looking up the code

  <span style="display: none;">hidden</span>
  <span style="visibility: hidden;">world</span>

Results are as follows:
IE8 and IE9 don't respect visibility:hidden
IE6 and IE7 don't respect neither visibility:hidden nor display:none

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