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

3 posts, 1 answers
  1. Roelande
    Roelande avatar
    48 posts
    Member since:
    May 2006

    Posted 05 Dec 2012 Link to this post

    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. Answer
    Rumen
    Admin
    Rumen avatar
    14098 posts

    Posted 10 Dec 2012 Link to this post

    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.
  3. Roelande
    Roelande avatar
    48 posts
    Member since:
    May 2006

    Posted 10 Dec 2012 Link to this post

    Thanks for the awesome support, Rumen!
Back to Top