Table Drag Handles Misaligned in Firefox

[Cyber High]

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

[Rumen]

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

[Naveed Ashfaq]

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 (!).

[Rumen]

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