Table Drag Handles Misaligned in Firefox

4 posts, 0 answers
  1. PASS
    PASS avatar
    29 posts
    Member since:
    Jun 2007

    Posted 16 Sep 2010 Link to this post

    If you add a table to a RadEditor in Firefox, and set its alignment to center, the drag handles remain left or right aligned with the edge of the editor, depending on where it was located prior to setting the alignment to center.

    Please see the attached picture for an example.

    I can only reproduce this in Firefox. I am using Firefox version 3.6.10, and Telerik version 2010.2.826
  2. Rumen
    Admin
    Rumen avatar
    13752 posts

    Posted 17 Sep 2010 Link to this post

    Hello PASS,

    This is a browser related problem, because the table handles are provided by the RichTextEditing engine of the browser under which the editor operates. The Align commands are also browser implementation and fired by the browser's execCommand method.

    This problem should be fixed by the Mozilla's developers, because we could not change the position of the table handlers, because they are not HTML objects.

    Greetings,
    Rumen
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Naveed Ashfaq
    Naveed Ashfaq avatar
    2 posts
    Member since:
    Aug 2004

    Posted 15 Jul 2011 Link to this post

    For others that search for this issue, I'd like to add that things are even worse worse with the editor when the ContentAreaMode property is "Div" (ie, inline editing).  In this case the table cell management handles are positioned far away from the current table cell.  This appears to have something to do with the display="relative" style on the content area div element.  Using Firebug to change the value to the default "static", and the cell handles are positioned properly, although the table handles continue to be positioned horizontally offset from the table (which seems to be due to the centering of the table from the "margin:auto" style).

    See the attached screenshots of the Telerik demo site editor (version 2011 Q2).  The first shows the normal situation using Firefox (version 5 now) with all the table handles out of position when editing in the div mode; the second shows identical to the original post after I used Firebug to change the position style on the content div from relative to static.  The edit handles are circled in the red boxes, and the current position of the cursor is shown with the vertical red line.

    Is there a need for the div element to have "position:relative"?  The cell handles are misaligned both horizontally and vertically; at least the table handles were only misaligned horizontally when centering, and still relatively easy to access.

    For reference, this appears to be mozilla bugilla bug 399046, which has not had progress in years.  There is a comment that it originated in the Netscape code (!).
  4. Rumen
    Admin
    Rumen avatar
    13752 posts

    Posted 20 Jul 2011 Link to this post

    Hi Naveed,

    Yes, this is a browser bug which can be reproduced in an editable DIV element:


    <div style="position: relative;">
        <div contenteditable="true" style="width:300px;height:300px;border: 1px solid red;position: static;">
            <table align="center" style="background-color: #ffc000; " border="1">
                <tbody>
                    <tr>
                        <td> dsf</td>
                        <td> fs</td>
                        <td> dsf</td>
                    </tr>
                    <tr>
                        <td> dsf</td>
                        <td>sdf </td>
                        <td> dsf</td>
                    </tr>
                    <tr>
                        <td> fds</td>
                        <td>dsf </td>
                        <td> dsf</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    The position: relative css property is applied to the content area in DIV mode, to prevent resizing problems when switching from one Edit mode to HTML mode. If you would like you can override the position:relative style using the following class:
    <style type="text/css">
        .reContentArea.reContentAreaToggle
        {
            position: static !important;
        }
    </style>

    Best regards,
    Rumen
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top