RadEditor Design View: Table not showing dotted edit border upon selection in IE11

6 posts, 1 answers
  1. Kyle schultz
    Kyle schultz avatar
    13 posts
    Member since:
    Sep 2008

    Posted 10 Apr 2014 Link to this post

    I am currently using the new 2014 Service Pack for Telerik controls for ASP.NET AJAX. I noticed that when I have a table in the editor content (loaded from database), I
    cannot select it to change sizing or edit the table properties (the dotted border and column / row removal buttons are also missing). This feature works fine in FF and Chrome.

    Is there a required styling I need to apply in the ContentEditorCSS style sheet in order for the dotted border to appear when selecting a table in Design View? I currently have no specific table styling in there that could be overriding it.

    Please note that I cannot duplicate this in the RadEditor Demo page. The table in the demo view is indeed selectable in IE.

    Let me know if any code / screenshots will help.

    Thanks in advance.
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 15 Apr 2014 Link to this post

    Hello Kyle,

    As you mentioned, the described behavior is not reproducible with the online demos neither with a locally created projects. Due to that I am unable to investigate this issue properly.

    I suggest providing more details about the exact scenario leading to the issue, so that it could be reproduced and further investigated.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Kyle schultz
    Kyle schultz avatar
    13 posts
    Member since:
    Sep 2008

    Posted 15 Apr 2014 in reply to Ianko Link to this post

    Hello Ianko,

    I have a multi-editor platform where the user can create custom content. I have lined two snapshots, one from Firefox and one from IE witth same interface and content. You will notice that in the Firefox snapshot the TABLE is selectable and shows the column / row deletions and the user can also enter the table wizard to change properties. In the IE snapshot, the same content does not bring up the table borders, resizing drag boxes or the column/row delete buttons. Also the user cannot change table properties from the toolbar in design mode here. Most of our users are not skilled enough to change the content from the HTML view.

    I am also linking the CSS for the editor iframe.

    Firefox Design View

    IE Design View


    Editor CSS


    Let me know if you need more information.

    Thanks,
    Kyle
  4. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 17 Apr 2014 Link to this post

    Hi Kyle,

    I would like to inform you that the table resize feature in Firefox and IE comes from the browser and it is not implemented by the RadEditor control. You can find attached a simple editable iframe, with which you can examine the same results in the same browsers.

    The only resize functionality, implemented in the RadEditor is the one provided under Chrome.

    In IE, the resize handles appear only when the border of the table is selected. when the cross cursor appear. Please examine this screencast.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Kyle schultz
    Kyle schultz avatar
    13 posts
    Member since:
    Sep 2008

    Posted 17 Apr 2014 in reply to Ianko Link to this post

    Hi Ianko,

    Thank you for the information regarding the browser features. At least I know now the problem does not lay in the code or the editor itself.

    My situation with IE is that with dynamically loaded content (loaded from DB), I cannot even get the cross cursor to appear and select the table. It only seems to work when I add a new table from the wizard (from toolbar). Then i can see the resize handles upon selection.

    In light of this new information, how does one access the table properties screen for a given table in design mode? In the demo page on your screencast, you can right click anywhere on the table and bring up a properties menu (without the cross cursor). That would be a great workaround. Being able to add / delete columns and rows and set other table properties is more important in my application than to simply drag the table to resize. I didn't see anywhere in the code where you implement such a menu.

    If I can find out how to create that, it would be extremely helpful in solving this issue.

    Thanks,
    Kyle
  6. Kyle schultz
    Kyle schultz avatar
    13 posts
    Member since:
    Sep 2008

    Posted 17 Apr 2014 in reply to Kyle schultz Link to this post

    Hi Ianko,

    I figured it out. I can use context menus on the table tag to bring up the properties and row / column menu options.

    Thanks for your help,
    Kyle
Back to Top