Opened 13 years ago

Last modified 10 years ago

#8109 confirmed Bug

[IE] Readonly collapses empty paragrahs

Reported by: Sa'ar Zac Elias Owned by:
Priority: Normal Milestone:
Component: Core : Read-only Version: 3.6
Keywords: IE Support Cc:


  • Add the autogrow plugin to the extraPlugins directive in config.js.
  • Open the readonly sample in IE.
  • Add some empty paragraphs to the contents, above or beneath the existing text.
  • Hit "make it readonly".

See that the height is change and the empty paragraphs collapse.

Change History (6)

comment:1 Changed 13 years ago by Jakub Ś

Keywords: IE added
Status: newconfirmed
Version: 3.6

Reproducible in IE8 and IE9 from CKEditor 3.6 rev [6904]

comment:2 Changed 11 years ago by Joel

Version: 3.64.0 Beta

Reproducible also in the CKEditor 4.0 setReadOnly demo (IE9).

comment:3 Changed 11 years ago by Joel

Summary: [IE] Readonly collapses editor height with autogrow[IE] Readonly collapses empty paragrahs/editor height with autogrow (or without)

Modifying title because the title is misleading - this is not dependent on autogrow and for me and the editor height does not collapse. The real problem for me is that the empty paragraphs collapse! If you use the show elements, you can see that the paragraphs are there but their height is minimally small.

I wanted to keep the original title still kind of there if I missed something but also I wanted to add my issue more clearly as I see this as a broader problem rather than just editor height/autogrow. I might have missed something in testing as well.

comment:4 Changed 11 years ago by Jakub Ś

Version: 4.0 Beta3.6

@req don't change the version!!!! It tells us when problem has started occurring.

comment:5 Changed 10 years ago by Jakub Ś

Keywords: Support added
Summary: [IE] Readonly collapses empty paragrahs/editor height with autogrow (or without)[IE] Readonly collapses empty paragrahs

It looks like this is IE native issue. Problem can be reproduced with below code:

<div id="testdiv" style="margin: 20px; border:1px solid black; width:500px;" contenteditable="true">
<h2>IE8-11 collapse non-editable paragraphs when they are empty.</h2>
window.setTimeout(function(){document.getElementById('testdiv').setAttribute('contenteditable', false);},2000);


  1. You could add p {min-height: 20px;} in your CSS but this workaround won't handle correctly lines higher than 20px
  2. Fill paragraphs with &nbsp;. This is IMO better.


Perhaps we could fill empty paragraphs when setting readOnly mode? We would probably have to marked them with some e.g.'data-changed' attribute so that we could bring back their original state once readOnly is deactivated.

Last edited 10 years ago by Jakub Ś (previous) (diff)

comment:6 Changed 10 years ago by Jakub Ś

#12102 was marked as duplicate

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