radeditor ie8 toolbar width problem

2 posts, 0 answers
  1. vincent
    vincent avatar
    61 posts
    Member since:
    Jun 2008

    Posted 07 Apr 2011 Link to this post

    Ive tried setting width and toolswidth and neither are being rendered right in ie8.  Below is our code.  How do you set the width of the radeditor in ie8?

                                        <telerik:RadEditor runat="server" ID="RadEditor_Description" EditModes="Design, Html" tol
                                            Width="780px" Height="250px" ContentAreaMode="Iframe" OnClientLoad="OnClientLoad" >
                                            <ImageManager ViewPaths="~/Images/UploadedFiles" UploadPaths="~/Images/UploadedFiles"
                                                DeletePaths="~/Images/UploadedFiles" />
                                            <Tools>
                                                <telerik:EditorToolGroup>
                                                    <telerik:EditorTool Name="Undo" />
                                                    <telerik:EditorTool Name="Redo" />
                                                    <telerik:EditorTool Name="FindAndReplace" />
                                                    <telerik:EditorToolStrip Name="Paste Options">
                                                        <telerik:EditorTool Name="Cut" />
                                                        <telerik:EditorTool Name="Copy" />
                                                        <telerik:EditorTool Name="Paste" />
                                                        <telerik:EditorTool Name="PasteFromWord" />
                                                        <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
                                                        <telerik:EditorTool Name="PastePlainText" />
                                                        <telerik:EditorTool Name="PasteAsHtml" />
                                                    </telerik:EditorToolStrip>
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="LinkManager" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="ImageManager" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="FormatBlock" />
                                                    <telerik:EditorTool Name="InsertUnorderedList" />
                                                    <telerik:EditorTool Name="InsertOrderedList" />
                                                    <telerik:EditorTool Name="InsertHorizontalRule" />
                                                    
                                                    <telerik:EditorSeparator />
                                                    <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:EditorSeparator />
                                                    <telerik:EditorTool Name="JustifyLeft" />
                                                    <telerik:EditorTool Name="JustifyRight" />
                                                    <telerik:EditorTool Name="JustifyCenter" />
                                                    <telerik:EditorTool Name="JustifyFull" />
                                                    <telerik:EditorTool Name="JustifyNone" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="InsertRowBelow" />
                                                    <telerik:EditorTool Name="InsertRowAbove" />
                                                    <telerik:EditorTool Name="InsertColumnRight" />
                                                    <telerik:EditorTool Name="InsertColumnLeft" />
                                                    <telerik:EditorTool Name="SetCellProperties" />
                                                    <telerik:EditorSeparator />
                                                    <telerik:EditorTool Name="AjaxSpellCheck" />
                                                    <telerik:EditorTool Name="ToggleScreenMode" />
                                                </telerik:EditorToolGroup>
                                            </Tools>
                                            <Content>
                                            </Content>
                                            <CssFiles>
                                                <telerik:EditorCssFile Value="~/CSS/radeditor.css" />
                                            </CssFiles>
                                        </telerik:RadEditor>
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4712 posts

    Posted 11 Apr 2011 Link to this post

    Hi Vincent,

    Please try setting up more than one EditorToolGroup in order to let the toolbar wrap. Currently the whole toolbar is just one group and naturally it does not wrap. Here is your definition with a toolbar split in two:

    <telerik:RadEditor runat="server" ID="RadEditor_Description" EditModes="Design, Html"
                Width="780px" Height="250px" ContentAreaMode="Iframe">
                <ImageManager ViewPaths="~/Images/UploadedFiles" UploadPaths="~/Images/UploadedFiles"
                    DeletePaths="~/Images/UploadedFiles" />
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="Undo" />
                        <telerik:EditorTool Name="Redo" />
                        <telerik:EditorTool Name="FindAndReplace" />
                        <telerik:EditorToolStrip Name="Paste Options">
                            <telerik:EditorTool Name="Cut" />
                            <telerik:EditorTool Name="Copy" />
                            <telerik:EditorTool Name="Paste" />
                            <telerik:EditorTool Name="PasteFromWord" />
                            <telerik:EditorTool Name="PasteFromWordNoFontsNoSizes" />
                            <telerik:EditorTool Name="PastePlainText" />
                            <telerik:EditorTool Name="PasteAsHtml" />
                        </telerik:EditorToolStrip>
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="LinkManager" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="ImageManager" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="FormatBlock" />
                        <telerik:EditorTool Name="InsertUnorderedList" />
                        <telerik:EditorTool Name="InsertOrderedList" />
                        <telerik:EditorTool Name="InsertHorizontalRule" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="Bold" />
                        <telerik:EditorTool Name="Italic" />
                        <telerik:EditorTool Name="Underline" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="ForeColor" />
                        <telerik:EditorTool Name="BackColor" />
                    </telerik:EditorToolGroup>
                    <telerik:EditorToolGroup>
                        <telerik:EditorTool Name="FontName" />
                        <telerik:EditorTool Name="RealFontSize" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="JustifyLeft" />
                        <telerik:EditorTool Name="JustifyRight" />
                        <telerik:EditorTool Name="JustifyCenter" />
                        <telerik:EditorTool Name="JustifyFull" />
                        <telerik:EditorTool Name="JustifyNone" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="InsertRowBelow" />
                        <telerik:EditorTool Name="InsertRowAbove" />
                        <telerik:EditorTool Name="InsertColumnRight" />
                        <telerik:EditorTool Name="InsertColumnLeft" />
                        <telerik:EditorTool Name="SetCellProperties" />
                        <telerik:EditorSeparator />
                        <telerik:EditorTool Name="AjaxSpellCheck" />
                        <telerik:EditorTool Name="ToggleScreenMode" />
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
                </Content>
                <CssFiles>
                    <telerik:EditorCssFile Value="~/CSS/radeditor.css" />
                </CssFiles>
            </telerik:RadEditor>

    On my end the above declaration results in the attached screenshot, which is the expected behavior.

    Please note that I had to remove the OnClientLoad handler and that I do not have the actual radeditor.css file. If you set the Editor's width in them it could also lead to an unwanted result.


    Regards,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top