New
Last Updated: 06 Feb 2019 10:41 by ADMIN
Al
Created on: 05 Feb 2019 21:44
Category: Editor
Type: Bug Report
0
Context menu items to add a row above or below behaves incorrectly on Mac

When editing certain HTML layouts in a RadEditor on a Mac, when you right-click on the empty space to the right of the text content in a table cell inside a nested table, then click Row -> Insert Row Above, the editor inserts a row above the current row in one of the parent tables, instead of in the table containing the specific cell that was clicked on.

To reproduce, paste the following code into the HTML view of a RadEditor. Then switch to Design mode, and right click in the empty space to the right of the text "Type your message here!", but within the same table cell as that text. Select Row -> Insert Row Above, and see that the editor inserts a row into the wrong table.

This is only reproducible on a Mac, but it has been confirmed to happen in both Safari and Chrome.

The project this is for is currently using version 2016.3.1027, however I've pasted this code into the Telerik RadEditor demo at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx , which I presume is running the latest version, and the problem is reproducible there also.

 

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <meta content="width=device-width" name="viewport" />
        <title>Newsletter from your Pro</title>
        <style type="text/css">
            <!--
	
	-->
        </style>
    </head>
    <body>
        <table style="background-color: #C9CAC8 ;" cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody>
                <tr>
                    <td>
                    <table style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="body" cellspacing="0" cellpadding="0" align="center" border="0" width="640">
                        <tbody>
                            <tr>
                                <td style="background-color: #ffffff; height: 60px;" class="side-pad" colspan="6" align="center"><span style="text-align: center;" class="devicewidthinner"></span></td>
                                <td style="background-color: #ffffff; height: 60px;" class="side-pad" align="center"><span style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #63666a;">February 5, 2019</span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #ffffff; height: 87px;" class="side-pad" colspan="6" align="center"><span class="devicewidth"></span></td>
                                <td style="background-color: #ffffff;" class="side-pad" align="center"></td>
                            </tr>
                            <tr>
                                <td style="background-color: #d55c19; width: 201px; height: 30px;" class="side-pad" align="center"><span style="text-align: center; font-weight: normal; line-height: 24px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff;"><a style="color: #fff; text-decoration: none;" href="http://www.test.com">Visit website</a></span></td>
                                <td style="background-color: #ffffff; width: 4px;" class="side-pad" align="center">&nbsp;</td>
                                <td style="background-color: #d55c19; width: 86px;" class="side-pad" align="center"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff;"><a style="color: #fff; text-decoration: none;" href="mailto:test@test.com">Email me!</a></span></td>
                                <td style="background-color: #ffffff; width: 4px;" class="side-pad" align="center">&nbsp;</td>
                                <td style="background-color: #d55c19; width: 122px;" class="side-pad" align="center"><span style="text-align: center; line-height: 15px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff;">123-456-7890</span></td>
                                <td style="background-color: #ffffff; width: 4px;" class="side-pad" align="center">&nbsp;</td>
                                <td style="background-color: #63666a; width: 201px; height: 30px;" class="side-pad" align="center"><span style="text-align: center; font-weight: normal; font-size: 12pt; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #ffffff;">Test Testerson</span></td>
                            </tr>
                            <tr>
                                <td style="background-color: #ffffff;" class="side-pad" colspan="7" align="center">
                                <table class="container" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
                                    <tbody>
                                        <tr>
                                            <td style="height: 250px;" align="center">
                                            <table class="row" cellspacing="0" cellpadding="0" align="center" border="0" width="580">
                                                <tbody>
                                                    <tr>
                                                        <td style="height: 250px;">
                                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="width: 100%; height: 205px;" valign="top">
                                                                    <table style="mso-table-lspace:0;mso-table-rspace:0;" cellspacing="0" cellpadding="0" align="left" border="0" width="100%">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-size: 14px; color: #63666a; font-weight: normal; line-height: 20px; width: 205px;" colspan="4" valign="top">&nbsp;</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-size:14px; color:#63666a; font-weight:normal; text-align:left; line-height:20px;" colspan="4" valign="top"><span style="font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: #63666a;">Type your message here!</span></td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-size:14px; color:#63666a; font-weight:normal; text-align:left; line-height:20px;" colspan="4" valign="top">&nbsp;</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-size:14px; color:#63666a; font-weight:normal; text-align:left; line-height:20px;" colspan="4" valign="top">&nbsp;</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td style="font-family: Helvetica, Arial, sans-serif; font-weight: normal; font-size:14px; color: #63666a; line-height:18px; text-align:left;" colspan="4">
                                                                                <p>&nbsp;</p>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="4" valign="top">&nbsp;</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan="4" valign="top">&nbsp;</td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                            <tr>
                                <td style="background-color: #63666a;" class="side-pad" colspan="7" align="center">
                                <table class="container" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
                                    <tbody>
                                        <tr>
                                            <td align="center">
                                            <table class="row" cellspacing="0" cellpadding="0" align="center" border="0" width="580">
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                                            <tbody>
                                                                <tr bgcolor="#63666A">
                                                                    <td style="height: 18px;" valign="top" align="center">&nbsp;</td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="top">
                                                                    <table style="mso-table-lspace:0;mso-table-rspace:0;" class="full-width collapse" cellspacing="0" cellpadding="0" align="left" border="0" width="100%">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="font-size:12px; color:#63666a; font-weight:normal; text-align:left;" class="center">
                                                                                <p><span style="font-size: 12px; line-height: 14px; text-align: left; font-family: Helvetica, Arial, sans-serif; color: #ffffff;" class="footer">Here is some footer text.</span></p>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                        <tbody>
                                                                            <tr>
                                                                                <td class="center" valign="top" align="center">&nbsp;</td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="center" valign="top" align="center">
                                                                                <table cellspacing="0" cellpadding="0" align="center" border="0">
                                                                                    <tbody>
                                                                                        <tr>
                                                                                            <td align="center"></td>
                                                                                            <td style="width: 12px;" align="center">&nbsp;</td>
                                                                                            <td align="center"></td>
                                                                                            <td style="width: 12px;" align="center">&nbsp;</td>
                                                                                            <td align="center"></td>
                                                                                            <td style="width: 12px;" align="center">&nbsp;</td>
                                                                                            <td align="center"></td>
                                                                                        </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                            <tr style="background-color: #636666a;">
                                <td style="background-color: #63666a;" class="side-pad" colspan="7" align="center">
                                <table class="container" cellspacing="0" cellpadding="0" align="center" border="0" width="600">
                                    <tbody>
                                        <tr>
                                            <td align="center">
                                            <table class="row" cellspacing="0" cellpadding="0" align="center" border="0" width="580">
                                                <tbody>
                                                    <tr>
                                                        <td style="height: 20px;">&nbsp;</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p>&nbsp;</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

(Total attached files size should be smaller than 20mb. Allowed extensions: .zip, .rar, .jpg, .png, .gif)
1 comment
ADMIN
Rumen
Posted on: 06 Feb 2019 10:41
Hi Al,

Thank you very much for reporting this problem!

I converted it to a public bug report and rewarded you with Telerik points for it.

The issue can be reproduced with stripped down content too:
<table cellspacing="0" cellpadding="0" align="center" border="0" width="600">
                                   <tbody>
                                       <tr>
                                           <td align="center">
                                           <table cellspacing="0" cellpadding="0" align="center" border="0" width="580">
                                               <tbody>
                                                   <tr>
                                                       <td>
                                                       <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                                           <tbody>
                                                               <tr><td valign="top"> </td></tr><tr><td valign="top"> </td></tr><tr><td valign="top"> </td></tr><tr><td valign="top"> </td></tr><tr><td valign="top"> </td></tr><tr>
                                                                   <td valign="top">
                                                                   <table cellspacing="0" cellpadding="0" align="left" border="0" width="100%">
                                                                       <tbody>
                                                                           <tr>
                                                                               <td colspan="4" valign="top"> </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td colspan="4" valign="top"><span>Type your message here!</span></td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td colspan="4" valign="top"> </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td colspan="4" valign="top"> </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td colspan="4">
                                                                               <p> </p>
                                                                               </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td colspan="4" valign="top"> </td>
                                                                           </tr>
                                                                           <tr>
                                                                               <td colspan="4" valign="top"> </td>
                                                                           </tr>
                                                                       </tbody>
                                                                   </table>
                                                                   </td>
                                                               </tr>
                                                           </tbody>
                                                       </table>
                                                       </td>
                                                   </tr>
                                               </tbody>
                                           </table>
                                           </td>
                                       </tr>
                                   </tbody>
                               </table>


The problem is due to that the MAC browsers changes the selection on mouse right button click.  In our case, the selection goes to the white space after the cell(https://www.screencast.com/t/WvqWwJrSsm). If the right click is over text, the browser selects the text and Cell Properties works as expected.

For the time being I can suggest:

  • Right click on the content of the cells in order to add new rows or
  • Use the available Insert Row and Column options inside the Insert Table drop down which work as expected and do not depend on right clicking events.

 


Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.