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

RadEditor Content area is initially rendered as as single line.

6 Answers 185 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Tom Marsden
Top achievements
Rank 1
Tom Marsden asked on 11 Mar 2010, 04:56 PM

Greetings,
I'm trying to figure out a quirk I see with RadEditor. I've declared a RadEditor instance in the .aspx page, and when the page loads initially the editor content area is rendered as a single line ( although I have declared the width=680px and the height=500px ). When I hit F5 to refresh the page, the editor's content area is displayed as I would expect.

Any ideas on what could cause this? I have attached two screen shots so you can see how the editor content area is being rendered ( "screen_1.jpg" and "screen_2.jpg" ). The markup declaring the Editor is as follows, and is contained within an UpdatePanel.

Regards,
Tom

                                                       <telerik:RadEditor   
                                                             ID="EmailBodyEditor" runat="server" 
                                                             Width="680px" 
                                                             Height="500px"   
                                                             AutoResizeHeight="true" 
                                                             NewLineBr="true" 
                                                             ToolBarMode="Default" 
                                                             EnableResize="False"   
                                                             ExternalDialogsPath="~/EditorDialogs/"   
                                                             EditModes="Design, Preview, HTML" 
                                                             OnClientCommandExecuting="OnClientCommandExecuting"   > 
                                                        <CssFiles> 
                                                            <telerik:EditorCssFile Value="fakeCssfile.css" /> 
                                                        </CssFiles>                                                                     
                                                        <Tools> 
                                                           <telerik:EditorToolGroup> 
                                                               <telerik:EditorTool Name="Bold" /> 
                                                               <telerik:EditorTool Name="Italic" /> 
                                                               <telerik:EditorTool Name="Underline" /> 
                                                               <telerik:EditorTool Name="StrikeThrough" /> 
                                                               <telerik:EditorTool Name="ForeColor" /> 
                                                               <telerik:EditorTool Name="BackColor" /> 
                                                               <telerik:EditorTool Name="InsertOrderedList" /> 
                                                               <telerik:EditorTool Name="InsertUnorderedList" /> 
                                                               <telerik:EditorTool Name="Indent" /> 
                                                               <telerik:EditorTool Name="Outdent" /> 
                                                               <telerik:EditorTool Name="JustifyLeft" /> 
                                                               <telerik:EditorTool Name="JustifyCenter" /> 
                                                               <telerik:EditorTool Name="JustifyRight" /> 
                                                               <telerik:EditorTool Name="JustifyFull" /> 
                                                            </telerik:EditorToolGroup> 
                                                            <telerik:EditorToolGroup> 
                                                               <telerik:EditorTool Name="FindAndReplace" /> 
                                                               <telerik:EditorTool Name="ToggleScreenMode" /> 
                                                               <telerik:EditorTool Name="InsertTable" /> 
                                                               <telerik:EditorSeparator /> 
                                                               <telerik:EditorTool Name="FontName" /> 
                                                               <telerik:EditorTool Name="FontSize" /> 
                                                               <telerik:EditorTool Name="LinkManager" /> 
                                                               <telerik:EditorTool Name="ImageManager" /> 
                                                               <telerik:EditorTool Name="AjaxSpellCheck" /> 
                                                           </telerik:EditorToolGroup> 
                                                        </Tools> 
                                                        <ContextMenus> 
                                                            <telerik:EditorContextMenu TagName="IMG">  
                                                              <telerik:EditorTool Name="SetImageProperties" /> 
                                                              <telerik:EditorTool Name="ImageMapDialog" /> 
                                                            </telerik:EditorContextMenu> 
                                                            <telerik:EditorContextMenu TagName="TABLE">  
                                                              <telerik:EditorTool Name="ToggleTableBorder" /> 
                                                              <telerik:EditorTool Name="SetTableProperties" /> 
                                                              <telerik:EditorTool Name="DeleteTable" /> 
                                                            </telerik:EditorContextMenu> 
                                                            <telerik:EditorContextMenu TagName="TD">  
                                                              <telerik:EditorTool Name="InsertRowAbove" /> 
                                                              <telerik:EditorTool Name="InsertRowBelow" /> 
                                                              <telerik:EditorTool Name="DeleteRow" /> 
                                                              <telerik:EditorTool Name="InsertColumnLeft" /> 
                                                              <telerik:EditorTool Name="InsertColumnRight" /> 
                                                              <telerik:EditorTool Name="MergeColumns" /> 
                                                              <telerik:EditorTool Name="MergeRows" /> 
                                                              <telerik:EditorTool Name="SplitCell" /> 
                                                              <telerik:EditorTool Name="DeleteCell" /> 
                                                              <telerik:EditorTool Name="SetCellProperties" /> 
                                                            </telerik:EditorContextMenu> 
                                                            <telerik:EditorContextMenu TagName="A">  
                                                              <telerik:EditorTool Name="SetLinkProperties" /> 
                                                              <telerik:EditorTool Name="Unlink" /> 
                                                            </telerik:EditorContextMenu> 
                                                            <telerik:EditorContextMenu TagName="BODY">  
                                                              <telerik:EditorTool Name="Cut" /> 
                                                              <telerik:EditorTool Name="Copy" /> 
                                                              <telerik:EditorTool Name="Paste" /> 
                                                              <telerik:EditorTool Name="PasteFromWord" /> 
                                                              <telerik:EditorTool Name="PastePlainText" /> 
                                                              <telerik:EditorTool Name="PasteAsHtml" /> 
                                                            </telerik:EditorContextMenu> 
                                                        </ContextMenus> 
                                                        <ImageManager ViewPaths="~/Documents/Images"   
                                                                      UploadPaths="~/Documents/Images"   
                                                                      DeletePaths="~/Documents/Images"   
                                                                      MaxUploadFileSize="2097152" SearchPatterns="*.jpg, *.gif, *.jpeg, *.bmp" /> 
                                                       </telerik:RadEditor> 

6 Answers, 1 is accepted

Sort by
0
Accepted
robertw102
Top achievements
Rank 1
answered on 11 Mar 2010, 08:25 PM
I have to believe it's the fault of the AutoResizeHeight property that you have set. I'm guessing when it loads it's trying to resize the height to fit the empty content?
0
Tom Marsden
Top achievements
Rank 1
answered on 11 Mar 2010, 09:11 PM
Thanks robertw102!

Setting AutoResizeHeight = false did the trick as far as I can tell. Not sure why I set that property to true. I would assume the default value is false as well.

Regards,
Tom
0
John
Top achievements
Rank 1
answered on 30 Apr 2010, 02:47 PM
I'm currently having the same problem as Tom, i took over this part of the project.  We set AutoResizeHeight="false", but on occasion it still renders as one line that is extremely wide.  Any refresh of the UpdatePanel or page will fix it, but I'd hate to have to automatically refresh the section of the page every time the user visits it.  They may notice a flicker and since it doesn't happen all the time would add unnecessary load to the server.  I have upgraded to the most recent version of telerik.  I think it may only be happening in IE, but since i cant reliably reproduce it i'm not sure if it happens in FF or not.

EDIT: I checked in the latest version of FF the page initially loads the editor in an invisible panel, the first time the editor is shown  it has this problem, but any refresh of the page or update panel will cause it to render correctly.   IE 8 still only experiences this problem intermittently.
0
Rumen
Telerik team
answered on 03 May 2010, 02:01 PM
Hi John,

My suggestions are to either:

This should fix the problem.

All the best,
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.
0
John
Top achievements
Rank 1
answered on 03 May 2010, 09:31 PM
Unfortunatly i have multiple sites using multiple skins/themes all sharing a common codebase.  We control which skin and theme(our grouping of images and css styles) in the web.config file, i'd hate to have to copy out any skin we wanted to use, or duplicate it if different themes used the same skin.  All the graphics and styling works except the width of the content area, on occasion in IE and every time the editor is initially made visible in FF 3.6+ it renders as a single line and very very wide.  

Is there anyway i could just override the hieght/width settings on the content area so that it will always be the same size when it loads?  We have another editor on our site that works fine, but it is never hidden.  It is on its own page that opens in a rad window, it never has any issues loading.  They wont let me do that with the one that is having problems.

John
0
Rumen
Telerik team
answered on 04 May 2010, 09:43 AM
Hi John,

Did you tried the suggested CDN solution? When loading the controls skin files from a CDN server, you should not register manually any css link tags on the page with the control.

You can also set the editor's height using the editor.setSize client side method. You can set the height of the content area IFRAME element using editor.get_contentAreaElement().style.height = "500px";

You can execute the lines of code above in a setTimeout function with small delay when showing the editor in Firefox.


All the best,
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
Tom Marsden
Top achievements
Rank 1
Answers by
robertw102
Top achievements
Rank 1
Tom Marsden
Top achievements
Rank 1
John
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or