RadEditor Width Problem

3 posts, 0 answers
  1. Bruce
    Bruce avatar
    8 posts
    Member since:
    Dec 2011

    Posted 15 Dec 2011 Link to this post

    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

  2. Rumen
    Admin
    Rumen avatar
    14469 posts

    Posted 16 Dec 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Bruce
    Bruce avatar
    8 posts
    Member since:
    Dec 2011

    Posted 20 Dec 2011 Link to this post

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