Opened 4 years ago

Last modified 15 months ago

#8109 confirmed Bug

[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 (6)

comment:1 Changed 4 years ago by j.swiderski

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

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

comment:2 Changed 3 years 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 3 years 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 3 years 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 18 months 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 18 months ago by j.swiderski (previous) (diff)

comment:6 Changed 15 months ago by j.swiderski

#12102 was marked as duplicate

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