RadEditor Width Problem

[Bruce]

I am currently using Telerik Version v.2009.02.0826.35, and encountering an issue where the RadEditor sporadically will display much wider than defined, forcing horizontal scrolling. Looking at other threads here about this problem, the solution seems to be registering external skins.

However, I am not using a skin for either the RadEditor control, nor the DetailsView that is is part of.

The one thing I did notice though, is that the toolbar, which is loaded from an XML file, doesn't display properly either when the RadEditor misbehaves. I've included two screenshoots - one bad, one good.

Here is a snapshot of the portion of the aspx page where the RadEditor exists:

                    <div id="divDetailsView" runat="server">
                        <asp:DetailsView ID="detDetailsView" runat="server" Height="208px" Width="930px"
                            OnItemCommand="divDetailsView_ItemCommand" AutoGenerateRows="False" DataKeyNames="ref_id"
                            DataSourceID="SqlDataSourceDetails" HorizontalAlign="Center" DefaultMode="Edit"
                            EnableModelValidation="True" BorderStyle="None" GridLines="None" >
                            <Fields>
                                <asp:TemplateField HeaderText="Name: " SortExpression="ref_name">
                                    <EditItemTemplate>
                                        <asp:TextBox ID="ref_name" runat="server" Text='<%# Bind("ref_name") %>'></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvReferenceName" runat="server" Text="* Reference Name is required"
                                            ControlToValidate="ref_name" Font-Bold="True" BorderStyle="None"></asp:RequiredFieldValidator>
                                    </EditItemTemplate>
                                    <InsertItemTemplate>
                                        <asp:TextBox ID="ref_name" runat="server" Text='<%# Bind("ref_name") %>'></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvReferenceName" runat="server" Text="* Reference Name is required"
                                            ControlToValidate="ref_name" Font-Bold="True" BorderStyle="None"></asp:RequiredFieldValidator>
                                    </InsertItemTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblReferenceName" runat="server" Text='<%# Bind("ref_name") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ControlStyle BorderStyle="Inset" BorderWidth="1px" Width="250px" />
                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Right" BorderWidth="5px" BorderColor="White"
                                        VerticalAlign="Top" />
                                    <ItemStyle HorizontalAlign="Left" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Section: " SortExpression="sec_id">
                                    <EditItemTemplate>
                                        <asp:DropDownList ID="lstSection" runat="server" DataSourceID="SqlDataSourceSections"
                                            DataTextField="sec_name" DataValueField="sec_id" SelectedValue='<%# Bind("sec_id") %>'
                                            Width="175px">
                                        </asp:DropDownList>
                                    </EditItemTemplate>
                                    <InsertItemTemplate>
                                        <asp:DropDownList ID="lstSection" runat="server" DataSourceID="SqlDataSourceSections"
                                            DataTextField="sec_name" DataValueField="sec_id" SelectedValue='<%# Bind("sec_id") %>'
                                            Width="175px">
                                        </asp:DropDownList>
                                    </InsertItemTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblSection" runat="server" Text='<%# Bind("sec_name") %>'></asp:Label>
                                    </ItemTemplate>
                                    <ControlStyle BorderStyle="Inset" BorderWidth="1px" Width="250px" />
                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Right" BorderWidth="5px" BorderColor="White"
                                        VerticalAlign="Top" />
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Description: " SortExpression="ref_descript">
                                    <ItemTemplate>
                                        <telerik:RadEditor ID="RadEditor1" runat="server" Content='<%# Bind("ref_descript") %>'
                                            Width="500px" ToolbarMode="Default" ToolsFile="~/Admin/RefToolbar.xml" BackColor="White">
                                            <CssFiles>
                                                <telerik:EditorCssFile Value="~/EditorContentArea.css" />
                                            </CssFiles>
                                            <MediaManager UploadPaths="~/Images" ViewPaths="~/Images" MaxUploadFileSize="2147483647" />
                                            <DocumentManager UploadPaths="~/Documents" ViewPaths="~/Documents" MaxUploadFileSize="2147483647" />
                                            <ImageManager UploadPaths="~/Images" ViewPaths="~/Images" MaxUploadFileSize="2147483647" />
                                            <FlashManager UploadPaths="~/Flash" ViewPaths="~/Flash" MaxUploadFileSize="2147483647" />
                                        </telerik:RadEditor>
                                    </ItemTemplate>
                                    <ControlStyle BorderStyle="Inset" BorderWidth="1px" Width="500px" />
                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Right" BorderWidth="5px" BorderColor="White"
                                        VerticalAlign="Top" />
                                    <ItemStyle HorizontalAlign="Left" />
                                </asp:TemplateField>


Any idea how/what I can do to resolve this ??

Thanks !

Bruce

[Rumen]

Hello Bruce,

This is a skinning problem, which you can experience even with the Default skin that RadEditor uses in your application. The solution is explained in the following sticky note: Incorrect rendering of RadEditor when shown with AJAX in initially hidden parent?

Since you are using a very old version, it might be needed to upgrade to the latest one Q3 2011 release before the fix from the above sticky to take effect.

Best regards,
Rumen
the Telerik team

[Bruce]

The solution in the sticky note solved this issue for me. Thank you !