This is a migrated thread and some comments may be shown as answers.

Editor Tools glitch

4 Answers 129 Views

Editor

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 30 Jun 2010, 11:43 AM

Hello Sébastien,

I was unable to reproduce the problem but I have the following suggestions that should help you to solve it:

- reset your Internet Explorer Settings as it is explained in this blog post: http://blogs.msdn.com/ie/archive/2006/06/12/628499.aspx?
- set the browser's Zoom level to its default value of 100% (if it is changed).
- the problem could be also due to an external css style or missing or not XHTML Doctype. Make sure that you have XHTML doctype on the page with RadEditor as the following one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- register the external CDN skin of the control.

Sincerely yours,
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

answered on 30 Jun 2010, 03:22 PM

toolsglitch2.GIF

So far, I have tried this :

- The zoom is at it's default
- I don't have an external css file and the doctype is the same

But I have found when this is happening. This is the smallest project that reproduce the problem

    
            %@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadEditorGlitch._Default" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
                <title>Glitch in radEditor</title> 
        
                <style type="text/css"> 
        
                html, body, form 
        
                { 
        
                    height: 100%; 
        
                    margin: 0px; 
        
                    padding: 0px; 
        
                    overflow: hidden; 
        
                } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form2" runat="server"> 
        
                    <telerik:RadScriptManager ID="ScriptManager" runat="server"  
        
                        EnableTheming="True"> 
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadAjaxManager ID="ajaxManager" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="ajaxManager"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="editorNote"/> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <script type="text/javascript"> 
        
                        function error() { 
        
                            var ajaxManager = $find("<%= ajaxManager.ClientID %>"); 
        
                            ajaxManager.ajaxRequest(""); 
        
                            var pane = $find("<%= paneEditor.ClientID %>"); 
        
                            pane.collapse(); 
        
                        }    
        
                    </script> 
        
                    <div id="ParentDivElement" style="height: 100%;"> 
        
                        <div onclick="error();">Click here to produce the glitch</div> 
        
                       <telerik:RadSplitter ID="splitterPage" runat="server" Height="100%" Width="100%" 
        
                            Orientation="Horizontal" ResizeMode="Proportional" HeightOffset="20"> 
        
                            <telerik:RadPane ID="panePage" runat="server" Height="65%"> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Backward" /> 
        
                            <telerik:RadPane ID="paneEditor" runat="server" height="35%"> 
        
                                <telerik:RadEditor ID="editorNote" Runat="server" height="90%"  
        
                                    width="98%" EnableResize="False"> 
        
                                    <Content> 
        
            </Content> 
        
                                </telerik:RadEditor> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

It is when the javascript function is called that the glitch start to appear. Also, the only time this problem appear is when the page is loaded in a .Net WebBrowser control.

    
            Public Class Form1 
        
                Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
        
                    WebBrowser1.Navigate("http://localhost:49646/Default.aspx") 
        
                End Sub 
        
            End Class

I will try the another solution you gave me and see if I can correct this

Accepted

answered on 02 Jul 2010, 01:54 PM

Hello Sébastien,

Thank you for the provided sample code.

I was able to reproduce it in a WebBrowser WinForms control. After detailed investigation it appeared a bug of Internet Explorer 7 rendering engine which is used to render the web pages in the WebBrowser control. The IE7 engine is unable to properly divide and render the toolbar UL tags after the Ajax callback.

You do not experience the reported problem in your Internet Explorer browser because the browser developers have fixed the bug in Internet Explorer 8 browser.

Our recommendation to fix the problem is to choose one of the other RadEditor's ToolBarMode options: Floating, ShowOnFocus or PageTop, e.g.

<telerik:RadEditor ToolbarMode="ShowOnFocus" ...

or create a custom toolsfile.xml file and divide the tools in smaller inner toolbars.

You can also change the WebBrowser rendering mode to IE8 by following the instructions in this MS article: WebBrowser Control Rendering Modes in IE8.

Best regards,
Rumen
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Editor Tools glitch

4 Answers, 1 is accepted