Ticket #8109 (confirmed Bug)

Opened 3 years ago

Last modified 7 weeks ago

[IE] Readonly collapses empty paragrahs

Reported by: Saare Owned by:
Priority: Normal Milestone:
Component: Core : Read-only Version: 3.6
Keywords: IE Support Cc:

Description

  • 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

comment:1 Changed 3 years ago by j.swiderski

  • Status changed from new to confirmed
  • Keywords IE added
  • Version set to 3.6

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

comment:2 Changed 18 months ago by req

  • Version changed from 3.6 to 4.0 Beta

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

comment:3 Changed 18 months ago by req

  • Summary changed from [IE] Readonly collapses editor height with autogrow to [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 18 months ago by j.swiderski

  • Version changed from 4.0 Beta to 3.6

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

comment:5 Changed 7 weeks ago by j.swiderski

  • Keywords Support added
  • Summary changed from [IE] Readonly collapses empty paragrahs/editor height with autogrow (or without) to [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>
<p>Text</p>
<p></p>
<p></p>
<p></p>
<p>Text</p>
<script>
window.setTimeout(function(){document.getElementById('testdiv').setAttribute('contenteditable', false);},2000);
</script>
</div>

Workarounds:

  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.

Fix:

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 7 weeks ago by j.swiderski (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy