RadEditor Content area is initially rendered as as single line.

7 posts, 1 answers
  1. Tom Marsden
    Tom Marsden avatar
    2 posts
    Member since:
    Feb 2010

    Posted 11 Mar 2010 Link to this post

    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> 
  2. Answer
    robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 11 Mar 2010 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom Marsden
    Tom Marsden avatar
    2 posts
    Member since:
    Feb 2010

    Posted 11 Mar 2010 Link to this post

    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
  5. John
    John avatar
    13 posts
    Member since:
    Feb 2010

    Posted 30 Apr 2010 Link to this post

    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.
  6. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 03 May 2010 Link to this post

    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.
  7. John
    John avatar
    13 posts
    Member since:
    Feb 2010

    Posted 03 May 2010 Link to this post

    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
  8. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 04 May 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017