RadEditor ToolbarMode="ShowOnFocus" Issue with SharePoint 2013

[Eric]

Hello,

In my SharePoint 2013 site, I have activated the "Use RadEditor to edit HTML fields" feature. All is OK when my ToolbarMode is on default. But, when I try the "ShowOnFocus" mode, the Toolbar follow the page "scrolling" (please watch the Video for seeing the issue).

Is it normal?

Thank a lot for your help.

Regards

Éric

[Ianko]

Hi Éric,

I have answered to this question in the support ticket previously opened by you, that this is the expected behavior for the RadEditor control, when is used with this toolbar mode and in the SharePoint's layout.

The possible workaround is to set a different mode, suitable for your expectations.

Please, let us continue the conversation in the first opened support thread.

Regards,
Ianko
Telerik

[Avinash]

Hi,

I am using RadEditor in my application. When I run the sample application with sample code then I am able to see RadEditor Toolbar with "ShowOnFocus' option but when I am using this control with ShowOnFocus feature, then I am not able to see the toolbar on container focused. It's somehow gets hidden thoug focused on control.

The html content for toolbar is pasted below which might help you.

 

<div id="RadWindowWrapper_RadEditor1_toolbarMode" class="RadWindow RadWindow_Default rwNormalWindow rwTransparentWindow" unselectable="on" style="width: 10px; height: 1px; display: none; position: absolute; transform: none; backface-visibility: visible;"><table cellspacing="0" cellpadding="0" class="rwTable"><tbody><tr class="rwTitleRow"><td class="rwCorner rwTopLeft" style="cursor: nw-resize;">&nbsp;</td><td class="rwTitlebar" style="cursor: move;"><div class="rwTopResize" style="cursor: n-resize;"><!-- / --></div><table align="left" cellspacing="0" cellpadding="0" class="rwTitlebarControls"><tbody><tr><td><a class="rwIcon"></a></td><td><em unselectable="on" style="width: 1px;">&nbsp;</em></td><td nowrap="" style="white-space: nowrap;"><ul class="rwControlButtons"><li><a href="javascript:void(0);" class="rwPinButton" title="Pin on"><span>Pin on</span></a></li><li><a href="javascript:void(0);" class="rwReloadButton" title="Reload"><span>Reload</span></a></li><li><a href="javascript:void(0);" class="rwMinimizeButton" title="Minimize"><span>Minimize</span></a></li><li><a href="javascript:void(0);" class="rwMaximizeButton" title="Maximize"><span>Maximize</span></a></li><li><a href="javascript:void(0);" class="rwCloseButton" title="Close"><span>Close</span></a></li></ul></td></tr></tbody></table></td><td class="rwCorner rwTopRight" style="cursor: ne-resize;">&nbsp;</td></tr><tr class="rwContentRow"><td class="rwCorner rwBodyLeft" style="cursor: w-resize;">&nbsp;</td><td class="rwWindowContent" valign="top"><div class="Default reToolbarWrapper" style="visibility: hidden; overflow: hidden; height: 0px; width: 100%;">
                    <ul class="reToolbar Default">
                        <li class="reGrip grip_first">&nbsp;</li><li><a title="Undo" class="reTool reSplitButton" href="#"><span class="Undo">&nbsp;</span><span class="split_arrow">&nbsp;</span></a></li><li><a title="Redo" class="reTool reSplitButton" href="#"><span class="Redo">&nbsp;</span><span class="split_arrow">&nbsp;</span></a></li><li class="reGrip grip_last">&nbsp;</li>
                    </ul><ul class="reToolbar Default">
                        <li class="reGrip grip_first">&nbsp;</li><li><a title="Bold" class="reTool" href="#"><span class="Bold">&nbsp;</span></a></li><li><a title="Italic" class="reTool" href="#"><span class="Italic">&nbsp;</span></a></li><li><a title="Underline" class="reTool" href="#"><span class="Underline">&nbsp;</span></a></li><li class="reSeparator">&nbsp;</li><li><a title="Numbered List" class="reTool" href="#"><span class="InsertOrderedList">&nbsp;</span></a></li><li><a title="Bullet List" class="reTool" href="#"><span class="InsertUnorderedList">&nbsp;</span></a></li><li class="reSeparator">&nbsp;</li><li class="reGrip grip_last">&nbsp;</li>
                    </ul>
                </div></td><td class="rwCorner rwBodyRight" style="cursor: e-resize;">&nbsp;</td></tr><tr class="rwStatusbarRow" style="display: none;"><td class="rwCorner rwBodyLeft" style="cursor: w-resize;">&nbsp;</td><td class="rwStatusbar"><table align="left" cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td style="width: 100%;"><input id="RadEditor1_toolbarMode_status" readonly="" unselectable="on"><label for="RadEditor1_toolbarMode_status" style="display: none;">status label</label></td><td style="width: 15px;"><div style="cursor: se-resize;"></div></td></tr></tbody></table></td><td class="rwCorner rwBodyRight" style="cursor: e-resize;">&nbsp;</td></tr><tr class="rwFooterRow"><td class="rwCorner rwFooterLeft" style="cursor: sw-resize;">&nbsp;</td><td class="rwFooterCenter" style="cursor: s-resize;">&nbsp;</td><td class="rwCorner rwFooterRight" style="cursor: se-resize;">&nbsp;</td></tr></tbody></table></div>

[Ianko]

Hello Avinash,

The code pasted seems to be the rendered result of the ASPX page you have, which does not lead me to how exactly RadWindow and RadEditor controls are configured in the ASP.NET application built. 

As the case you have is not so related to the initial discussion in this thread I suggest you to provide the ASPX markup you have in a new forum thread or in a support ticket. That way we will be able to properly examine the exact configuration you have and possibly see the behavior that you are experiencing.

Regards,
Ianko
Telerik by Progress

[Avinash]

Hi Lanko,

Thank you for your response. Could you please send me the steps to add new thread in forum. As I am new in this community I do not have much idea about creating new thread.

Thanks in advance.

[Ianko]

Hello Avinash,

First you need to find the forum you are interested in, for example, Telerik Forums / UI for ASP.NET AJAX Forum / Editor.

The, you click on the New Thread button located at the left-hand side of the page just below the title of the forum channel.

Type the title of the new forum thread, write the body in the textarea below, attach the files you need to provide (make sure that you attach zip files up to 20mb) and click Post this thread button. This will create you a new forum thread.  

As for sending support ticket, go to www.telerik.com log with your credentials, find the Get Support link and follow the instructions to send us a ticket. If you have further questions on getting support you can alwyas contact the sales department (at [e-mail]) to help you out. 

Regards,
Ianko
Telerik by Progress