This is a migrated thread and some comments may be shown as answers.

Selecting all text and changing the alignment adds empty paragraphs in IE9

2 Answers 63 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Roelande
Top achievements
Rank 1
Roelande asked on 05 Dec 2012, 01:50 PM
When selecting all text and applying a different alignment (left, right, center, justify) an empty paragraph is added after each element. This happens in Internet Explorer 9.

We are using version 2012.3.1016.45 of the editor, but the same problem happens with the online demo of the editor.

Example:
We have the following HTML-code in the texteditor:

<h1>Lorem Ipsum</h1>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum vestibulum elit nec rhoncus.</p>
<p>Duis urna elit, porttitor vel luctus vitae, suscipit dapibus nisi. Maecenas vulputate dapibus malesuada. Sed ut erat eget elit vulputate tincidunt. Sed in quam congue erat pulvinar.</p>
<p>Fusce non ligula et neque placerat dictum. Vivamus consectetur diam quis enim porta eget commodo justo interdum. Morbi id nisi eget nisi egestas dictum non in est. Praesent dignissim dolor non lorem faucibus pellentesque. Vivamus imperdiet cursus enim ut luctus. Morbi hendrerit suscipit turpis, ut sollicitudin erat auctor vitae.</p>
<p>In eget nisi sit amet metus semper bibendum:</p>
<ul>
    <li>Cras purus </li>
    <li>Lacinia id conseqat </li>
    <li>Gravida ut metus </li>
    <li>Pellentesque interdum </li>
    <li>Cras fermentum fringilla enim tincidunt </li>
    <li>Duis porttitor </li>
    <li>...</li>
</ul>
<p> </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.</p>

Then we do CTRL-A to select all the text and click the button to change the alignment (center, right or justify).

In Google Chrome we get this correct result:

<h1 style="text-align: justify;">Lorem Ipsum</h1>
<h4 style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum vestibulum elit nec rhoncus.</p>
<p style="text-align: justify;">Duis urna elit, porttitor vel luctus vitae, suscipit dapibus nisi. Maecenas vulputate dapibus malesuada. Sed ut erat eget elit vulputate tincidunt. Sed in quam congue erat pulvinar.</p>
<p style="text-align: justify;">Fusce non ligula et neque placerat dictum. Vivamus consectetur diam quis enim porta eget commodo justo interdum. Morbi id nisi eget nisi egestas dictum non in est. Praesent dignissim dolor non lorem faucibus pellentesque. Vivamus imperdiet cursus enim ut luctus. Morbi hendrerit suscipit turpis, ut sollicitudin erat auctor vitae.</p>
<p style="text-align: justify;">In eget nisi sit amet metus semper bibendum:</p>
<ul>
    <li style="text-align: justify;">Cras purus </li>
    <li style="text-align: justify;">Lacinia id conseqat </li>
    <li style="text-align: justify;">Gravida ut metus </li>
    <li style="text-align: justify;">Pellentesque interdum </li>
    <li style="text-align: justify;">Cras fermentum fringilla enim tincidunt </li>
    <li style="text-align: justify;">Duis porttitor </li>
    <li style="text-align: justify;">...</li>
</ul>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.</p>
<div style="text-align: justify;"><br />
</div>

In Internet Explorer 9, an empty paragraph is added after each element:

<h1 style="text-align: justify;">Lorem Ipsum</h1>
<p style="text-align: justify;">
</p>
<h4 style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<p style="text-align: justify;">
</p>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum vestibulum elit nec rhoncus.</p>
<p style="text-align: justify;">
</p>
<p style="text-align: justify;">Duis urna elit, porttitor vel luctus vitae, suscipit dapibus nisi. Maecenas vulputate dapibus malesuada. Sed ut erat eget elit vulputate tincidunt. Sed in quam congue erat pulvinar.</p>
<p style="text-align: justify;">
</p>
<p style="text-align: justify;">Fusce non ligula et neque placerat dictum. Vivamus consectetur diam quis enim porta eget commodo justo interdum. Morbi id nisi eget nisi egestas dictum non in est. Praesent dignissim dolor non lorem faucibus pellentesque. Vivamus imperdiet cursus enim ut luctus. Morbi hendrerit suscipit turpis, ut sollicitudin erat auctor vitae.</p>
<p style="text-align: justify;">
</p>
<p style="text-align: justify;">In eget nisi sit amet metus semper bibendum:</p>
<p style="text-align: justify;">
</p>
<ul>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">Cras purus </div>
    </li>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">Lacinia id conseqat </div>
    </li>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">Gravida ut metus </div>
    </li>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">Pellentesque interdum </div>
    </li>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">Cras fermentum fringilla enim tincidunt </div>
    </li>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">Duis porttitor </div>
    </li>
    <p style="text-align: justify;">
    </p>
    <li>
    <div style="text-align: justify;">...</div>
    </li>
    <p style="text-align: justify;">
    </p>
</ul>
<p style="text-align: justify;">
</p>
<p style="text-align: justify;"> </p>
<p style="text-align: justify;">
</p>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.</p>

2 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 10 Dec 2012, 08:12 AM
Hello,

The reported behavior is browser one, because as explained in this KB article, the content area of RadEditor is a standard editable iframe element which uses the browser's Justify commands to provide content alignment. The SelectAll command is also a browser command. I tested the provided content in an editable iframe (the test HTML file is attached) and verified that this is a browser behavior as you can see in the following video: http://screencast.com/t/WIO92ATN7sCZ.

I noticed that the browser problem does not happen in IE8 mode and for this reason I suggest to set the following meta tag that will render the page in IE8 mode:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Best regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Roelande
Top achievements
Rank 1
answered on 10 Dec 2012, 09:15 AM
Thanks for the awesome support, Rumen!
Tags
Editor
Asked by
Roelande
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Roelande
Top achievements
Rank 1
Share this question
or