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

RadEditor display issue in IE7

16 Answers 265 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Connections Academy Developer
Top achievements
Rank 1
Connections Academy Developer asked on 03 Apr 2009, 04:41 PM
I recently upgraded from RadControls release Q3 2008 to Q1 2009.  I am seeing a very odd display issue in IE7 (not in Chrome or Firefox) with the toolbars when I simply add a RadEditor to a page, and nothing else.  This is what I have:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<form id="form1" runat="server"
    <telerik:RadScriptManager ID="scriptManager" runat="server" /> 
    <telerik:radeditor id="description" runat="server"/> 
</form> 

To perform the upgrade, I:

1. Upgraded Telerik.Web.UI.dll and Telerik.Web.UI.xml
2. Updated the assembly version in web.config.

Is there anything else I should have to do to get this to work?  I noticed that Q12009 has a lot more embedded resources.  I no longer have to register a bunch of ScriptReferences for the RadEditor to work (i.e. RadEditor.js, AjaxSpellCheck.js, etc.).  At first, the fact that I was continuing to register these scripts was causing JS errors (which led to display issues) in ALL browsers, so I removed the references and decided to just put a RadEditor on a blank page (like above) with nothing else that could interfere with it.  This worked out fine except for the display issue I am seeing in IE7.  Am I missing something here?  Do I need to register any scripts or stylesheets?  I'm inclined to believe I've set it up correctly (for the most part) since it is working in other browsers.  Is there any documentation about the obvious differences in implementation that are required with the Q12009 release?

Note: I realize Q12009 SP1 was released yesterday, but this didn't strike me as the kind of thing that should require a service pack to fix; it is a pretty glaring display issue.

Thanks.

16 Answers, 1 is accepted

Sort by
0
Connections Academy Developer
Top achievements
Rank 1
answered on 03 Apr 2009, 04:42 PM
I suppose it would help to describe the actual issue I am seeing :)

What is happening is the toolbars seem to stretch out to a huge width, requiring me to scroll horizontally to see the right side of the editor.  The icons in the toolbars are also very spread out, with a lot of blank space between them.
0
Accepted
Tervel
Telerik team
answered on 03 Apr 2009, 04:52 PM
Hello,

This issue is in fact fixed in Q1 2009 SP1, contrary to what you assumed :)

The problem comes from using the editor on a non-XHTML compliant page (e.g. page with no proper DOCTYPE declaration).  There is an easy 3-line CSS hack that fixes the issue, but rather than doing that I suggest you try the SP1.



Best wishes,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Connections Academy Developer
Top achievements
Rank 1
answered on 03 Apr 2009, 05:24 PM
That worked.

Thanks a lot for the quick response!
0
Connections Academy Developer
Top achievements
Rank 1
answered on 03 Apr 2009, 05:36 PM
To follow up on one thing, though: to what extent is it no longer necessary to explicitly register ScriptReferences for various libraries?  For example, with the Q32008 RadEditor, I had this big chunk of references in my code:

scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Common.Popup.PopupScripts.js""Telerik.Web.UI")); 
scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Editor.RadEditor.js""Telerik.Web.UI")); 
scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Dialogs.DialogOpener.js""Telerik.Web.UI")); 
scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Editor.Modules.js""Telerik.Web.UI")); 
scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Spell.SpellCheckService.js""Telerik.Web.UI")); 
scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Editor.AjaxSpellCheck.js""Telerik.Web.UI")); 

And for the RadWindow I had:

scriptManager.Scripts.Add(new ScriptReference("Telerik.Web.UI.Window.RadWindow.js""Telerik.Web.UI")); 

etc.

Is it now safe to remove ALL such references?  If not, is there documentation of which ones need to be maintained per control?

Thanks.
0
Tervel
Telerik team
answered on 06 Apr 2009, 08:04 AM
Hello,

I am not sure why you registered those scripts.
The controls need no extra script registrations to run (because their scripts are embedded in the DLL).
Of course, in some specific scenarios - most commonly when it is about large scale projects with thousands of simultaneous users - it is possible to deploy the control scripts on an external storage server that can deliver those faster than (your) server. However, if the scripts reside on the same machine, there is not much need to register scripts manually.
To summarize, unless there is a very good reason to continue doing it, you should simply remove your script references and all controls should work fine using the scripts from the DLL.

Best regards,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
drgorin
Top achievements
Rank 1
answered on 06 Apr 2009, 12:33 PM
RADEDITOR DISPLAY DISTORTION Q1 2009 release.

I cannot upgrade to Q1 2009 SP1 at this time.  May I please have the hack that fixes the problem.  I too am experiencing this behavior.

Thanx,
Dr. Neil Gorin

--------------->>>>
The problem comes from using the editor on a non-XHTML compliant page (e.g. page with no proper DOCTYPE declaration).  There is an easy 3-line CSS hack that fixes the issue, but rather than doing that I suggest you try the SP1.----->>>>>

0
Tervel
Telerik team
answered on 06 Apr 2009, 12:44 PM
Hello drgorin,

Here you go:

<style type="text/css">
* html .RadEditor .reSplitButton
{
_display: inline-block;
}
</style>


I hope this helps,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
drgorin
Top achievements
Rank 1
answered on 06 Apr 2009, 06:53 PM
Thank you for responding to my support ticket in such a timely manner.  I do have a follow-up question regarding SP1 and the fix for this IE7 rendering issue. 

The developer that first reported this problem had the following in his aspx:

<
%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<form id="form1" runat="server"
    <telerik:RadScriptManager ID="scriptManager" runat="server" /> 
    <telerik:radeditor id="description" runat="server"/> 
</form> 

You stated  :
The problem comes from using the editor on a non-XHTML compliant page (e.g. page with no proper DOCTYPE declaration).  There is an easy 3-line CSS hack that fixes the issue, but rather than doing that I suggest you try the SP1.

However, my page has a slightly more robust header and I would think it to be a little different.  My aspx header is: 

<%

@ Page AspCompat="true" language="c#" validateRequest="false" Inherits="gmg.WebPatientSystem.PatientNotesEditAJAX" CodeFile="PatientNotesEditAJAX.aspx.cs" CodeFileBaseClass="OakLeaf.MM.Main.Web.UI.mmBusinessWebPage" %>

 

<%

 

@ Register Assembly="myControls" Namespace="eCentric.Web.UI.WebControls" TagPrefix="cc2" %>

 

<%

 

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<%

 

@ Register TagPrefix="xprs" TagName="header" Src="~/myDynamicHeader.ascx" %>

 

 

<!

 

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

 

<

 

 

script language="javascript" type="text/javascript" src="PatientToolbar.js"></script>

 

<

 

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

 

head runat="server">

 

 

 

<title>Patient Admin Notes</title>

 

 

 

<style type="text/css">

 

 

 

.style1

 

 

{

 

width: 22%;

 

 

 

height: 28px;

 

}

 

 

 

 

 

.reToolbar.WebBlue .InsertMyDate

 

 

{

 

background-image: url(myRadControls/Editor/InsertMyDate.gif);

 

}

 

 

 

.reToolbar.WebBlue .InsertMyPrintHeader

 

 

{

 

background-image: url(myRadControls/Editor/InsertMyPrintHeader.gif);

 

}

 

 

BODY

 

 

{

 

font-family: Verdana !important;

 

 

 

font-size: x-small !important;

 

 

 

color: Blue !important;

 

 

 

padding:3px;

 

 

 

background-image: none !important;

 

 

 

margin: 0px;

 

 

 

text-align: left;

 

 

}

 

 

</style>

 

 


Although my radeditor is rendering in an elongated way, I question if the reason for my issue may be different based on the difference in our headers.  And.....  I have one additional issue to report about the problem:

 I experience the rendering problem when I first hit the page.  However, the next time I hit the page it renders properly.

In closing I have one last question regarding SP1:
 When you report that SP1 will solve the problem, is it SP1 for version 2009 311 or version 2009 402.  Will version 2009 402 by itself solve the problem?  Please also provide me with instructions as to how to apply a service patch.  Up to this point I have always uninstall the previous version and install the next version.  I have never applied a patch.

Regards and many thanx
Dr. Neil Gorin




0
Tervel
Telerik team
answered on 09 Apr 2009, 08:57 AM
Hi drgorin,

The dll version of Q1 2009 SP1 (which should fix the problem you experience out of the box) is 2009 402.
My suggestion is to download it and replace your current Q1 2009 DLL in your applications's /bin directory. This is all that needs to be done to "apply a service patch".  There is no need to install/uninstall anything if you do not want to. Downloading the ZIP and using the DLL from there is all that it takes.

In case you experience a problem after trying the update, please let us know.

Best wishes,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Adrian
Top achievements
Rank 1
answered on 14 Apr 2009, 08:07 AM
At last!... we have also had this problem for ages where a css script does not seem to come through and the radeditor is about 1 million pixels wide.  I will upgrade now and try it.

My doc type is:

<!

 

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

 


Is there a problem I should be concerned about with my html source?

Regards Adrian
0
Adrian
Top achievements
Rank 1
answered on 14 Apr 2009, 10:05 AM
I have just upgraded to 2009 but the issue is still there - I got the bug first time in (as it is an intermittent problem).  The screen is stretching.

The application that radeditor sits in in quite a complex page...

On First Page Load the editor is not visible. An AJAX button shows a floating div panel that can be moved around the screen, another AJAX button shows the editor inside this floating div - and this is where I get the problem.

I have saved the html DOM but without all the dynamic scripts and css files I'm not sure it would be much help.

Any help would be appreciated.

Regards Adrian
0
Tervel
Telerik team
answered on 16 Apr 2009, 09:13 AM
Hello Adrian,

As of Q1 2009 the RadEditor skins have been significantly modified. In earlier version we too have been able to notice the intermittent problem you describe - it comes from the fact the CSS of the editor is not available originally and is sent with the AJAX request which sometimes messes the way browser parses and lays out the page.

However, as of Q1 2009 we have not been able to experience the problem (which does not mean that it is fixed - this is more or less a browser issue for IE only).

That said, there is a solution to the problem - registering the CSS of the editor manually on the page should do the trick. The following forum post discusses how to register an external skin for the editor:
http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-q3-2008-skins-available-for-download.aspx

On a side note, if you are able to reproduce the problem in a test project and send it to us we will review it and try to improve on the situation.


Best regards,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
David Moore
Top achievements
Rank 1
answered on 12 Jun 2009, 04:24 PM
I recently upgraded as well and am now getting an issue with radeditor in IE7, it's only showing up about 10 pixels wide.  It's behaving as if it can't find the skin or something along those lines.  Not quite sure.  I'm using embedded skins.  Anybody else running into this issue?

<telerik:RadEditor ID="description_RE" EditModes="Design" runat="server" Height="200" Width="550"
                       <CssFiles> 
                           <telerik:EditorCssFile Value="~resources/styles/EditorContentArea.css" /> 
                       </CssFiles> 
                        <Tools> 
                                <telerik:EditorToolGroup Tag="SpellCheck"
                                    <telerik:EditorTool Name="AjaxSpellCheck" /> 
                                </telerik:EditorToolGroup> 
                                <telerik:EditorToolGroup> 
                                    <telerik:EditorTool Name="Bold" /> 
                                    <telerik:EditorTool Name="Italic" /> 
                                    <telerik:EditorTool Name="Underline" /> 
                                    <telerik:EditorSeparator /> 
                                    <telerik:EditorTool Name="ForeColor" /> 
                                    <telerik:EditorTool Name="BackColor" /> 
                                    <telerik:EditorSeparator /> 
                                    <telerik:EditorTool Name="FontName" /> 
                                    <telerik:EditorTool Name="RealFontSize" /> 
                                </telerik:EditorToolGroup> 
                     </Tools>          
                    </telerik:RadEditor> 






0
Tervel
Telerik team
answered on 15 Jun 2009, 07:24 AM
Hello David,

Your editor declaration looks OK, and we are not sure what could be causing the problem. Please, open a support ticket and send us a simple, runnable project demonstrating the issue. Once we reproduce it at our end, we will establish the reason for the problem, correct it and send you back a working version.

Looking forward to hearing from you,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jerry
Top achievements
Rank 2
answered on 25 Feb 2010, 06:30 PM
This article is several months old and links to a solution almost a year old. Can you update and validate this solution / workaround?

To reiterate what the problem is:
   We have a RadWindow we use for a modal pop-up when a linkbutton lis clicked from a RadGrid. Inside the RadWindow we have a few controls including a RadEditor. The RadEditor will display in IE with a large width, outside the bounds of the RadWindow. In FireFox, it will have a normal width but the height will be outside the RadWindow bounds though not as noticable as the IE issue. As reported by previous users having the problem - if you close the RadWindow and then trigger it to open again (clicking the LinkButton again in my case) it will display normal. I have not been able to figure out how to make it reliably have the problem every time so it would be difficult to give you a project example.

We are using the 2009.3.1314.35 assembly.

-Jerry
0
Rumen
Telerik team
answered on 26 Feb 2010, 05:14 PM
Hello Jerry,

Have you tried to register the external skins of RadEditor as it is discusses in this KB article: Registering an external skin of RadEditor.

You can also try to register the external CDN skins of RadEditor as it shown in this help article: CDN support.

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.
Tags
Editor
Asked by
Connections Academy Developer
Top achievements
Rank 1
Answers by
Connections Academy Developer
Top achievements
Rank 1
Tervel
Telerik team
drgorin
Top achievements
Rank 1
Adrian
Top achievements
Rank 1
David Moore
Top achievements
Rank 1
Jerry
Top achievements
Rank 2
Rumen
Telerik team
Share this question
or