Resize Ribbon bar

[Jeff]

Hello,
I am using 2012.2.607.40 version of RadEditor. I have the editor inside a PageView. I have javascript that resizes my editor width (the resize code works perfectly except if I click on a ribbon bar tab). The problem I am having is when I navigate to the editor (ajax or direct page load) and then click on one of the ribbon bar tabs, the resize code does not resize the ribbon bar, which remains at it original 100% width. This also happen if I open the editor pageView on the initial page load so I don't think it has to do with Editor/PageView/Css issues? If I change to the Default editor toolbar, the editor and default toolbar resize correctly.

Here is my resize javascript code:

window.onresize = onPageResize;
    function onPageResize() {
        var editor = $find("<%=edEditor.ClientID %>");
        if (editor != null) {
            setTimeout(function () {
                var wt = jQuery('.editorTop').width();
                wt = (wt - 15);
                editor.setSize(wt, 600);
                editor.get_element().style.width = wt + "px";
            }, 200);
        }
    }

 
I do have the following code in my Master page to help with the well-known Css limitation:

<Telerik:RadStyleSheetManager ID="SSH1" EnableStyleSheetCombine="true" runat="server">
        <StyleSheets>
            <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Editor.css" />
            <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Editor.Default.css" />
            <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Window.css" />
            <Telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Window.Default.css" />
        </StyleSheets>
    </Telerik:RadStyleSheetManager>

Finally here is my editor markup:

<telerik:RadEditor ID="edEditor" Height="600px" Skin="Default" ToolbarMode="RibbonBar" toolsfile="~/Editor/Tools/ToolsFile.xml" EnableResize="false" OnClientLoad="edEditor_ClientLoad" OnClientModeChange="edEditor_ClientModeChange" runat="server">
    <CssFiles>
        <telerik:EditorCssFile Value="~/Editor/Styles/EditorContentArea.css" />
    </CssFiles>
</telerik:RadEditor>

Thank you!

[Ianko]

Hello Jeff,

Currently I could only make assumptions on the setup of the project, the Ribbon bar's and the RadEditor's  configuration, and the Client-side scripts used in the project.

The provided resize function is raised only when the browser's window is resized and not when a tab is clicked, so I suppose there should be another custom Client-side method for this functionality. Also in this function there is a logic that gets the width of an element with class name .editorTop, which I do not find in the provided information. 

The toolbar's size is dynamically calculated from the count and sizes of the tools and modification to their stylization could also be a possible origin for the described issue.

Note that the RadEditor's configuration has OnClientLoad and OnClientModeChange properties and the attached functions to them also could affect the toolbar.

The only suggestion I could make is to follow this forum thread about resizing issues with the Ribbon bar control and try the possible solutions from there.

If you still encounter the described problem please get back to me with more information about the project's setup and configuration. It would be helpful if you could provide a simple locally runnable project, which isolates the problematic field, so that I will be able to further investigate this issue.

Regards,
Ianko
Telerik