Image Manager from editor causes rad editor toolbar to disappear in IE8.

2 posts, 0 answers
  1. Ainsworth
    Ainsworth avatar
    1 posts
    Member since:
    Oct 2011

    Posted 27 Oct 2011 Link to this post

    Here is a sample page:  See the environment information in the UL tag in the markup sample.
    Steps to reproduce in IE8:
    . Select Image Manager Icon
    . Click Cancel button on the image manager dialog
    Notice the Scroll bar vanishes.  How can I fix this?  Thanks.

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
            <telerik:RadSplitter ID="splitterOuter" Height="99.9%" Width="99.9%" ResizeMode="Proportional"
                runat="server">
                <telerik:RadSplitBar ID="spVertical2" CollapseMode="Both" runat="server" />
                <telerik:RadPane ID="paneRightOuter" Scrolling="Y" runat="server">
                    <telerik:RadSplitter ID="spHorizontalOuter" ResizeMode="AdjacentPane" LiveResize="true"
                        Width="100%" Orientation="Horizontal" runat="server">
                        <telerik:RadPane ID="rPaneTop" runat="server" Scrolling="None">
                            <div>
                            <h2>Environment:</h2>
                                <ul>
                                    <li>RadEditor.dll Version 7.3.1.0 </li>
                                    <li>TeleriK.Web.UI Version 2011.1.315.40</li>
                                    <li>Telerik.Web.Design Version 2011.1.315.40 </li>
                                    <li>jQuery-1.4.2.js </li>
                                    <li>Visual Studio 2010 </li>
                                    <li>IE8 </li>
                                </ul>
                            </div>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="spHorizontalInner" AdjacentPanesNames-BottomPaneName="rpPaneBot"
                            runat="server" CollapseMode="Both" />
                        <telerik:RadPane ID="rpPaneBot" Scrolling="none" runat="server">
                            <telerik:RadEditor runat="server" ID="RadEditor1" Height="400px" SkinID="DefaultSetOfTools">
                                <Tools>
                                    <telerik:EditorToolGroup Tag="FileManagers">
                                        <telerik:EditorTool Name="ImageManager" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup>
                                        <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:EditorToolGroup>
                                </Tools>
                                <ImageManager ViewPaths="~/Editor/Img/UserDir/Marketing,~/Editor/Img/UserDir/PublicRelations" />
                                <Content>
                   The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are:
                    <ul>
                        <li><em>Single-file, drag-and-drop deployment</em></li>
                        <li><em>Built on top of ASP.NET AJAX</em></li>
                        <li><em>Unmatched loading speed with new semantic rendering </em></li>
                        <li><em>Full keyboard accessibility</em></li>
                        <li><em>Flexible Skinning mechanism</em></li>
                        <li><em>Simplified and intuitive toolbar configuration</em></li>
                        <li><em>Out-of-the-box XHTML-enabled output</em></li>
                    </ul>
                                </Content>
                            </telerik:RadEditor>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

  2. Rumen
    Admin
    Rumen avatar
    14374 posts

    Posted 28 Oct 2011 Link to this post

    Hello Ainsworth,

    The problem is due to that the height of RadEditor is larger than the height of its pane (<telerik:RadPane id="rpPaneBot">). Since you have disabled the vertical scroller, when the ImageManager is opened the focus goes to the content area of RadEditor and for this reason the pane's content is moved above and the toolbar disappears.

    To fix the problem you have two options:
    - enable the scrollbar -
     <telerik:RadPane ID="rpPaneBot" Scrolling="Y" runat="server"> 
    - or increase the size of RadPane

    For your convenience I have attached my test page.

    By the way I saw that you set the height in percents. In this scenario you can also set

    <style type="text/css">
        html,body,form
        {
            height:100%;
            padding:0;
            margin:0;   
        }
    </style>

    and

    <form id="form1" runat="server">
    <div style="height:100%;">
        ...

    as suggested in the following help article: Filling the Entire Page.

    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
Back to Top