radeditor ie8 toolbar width problem

[vincent]

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>

[Marin Bratanov]

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