IE9

2 posts, 1 answers
  1. Jasper
    Jasper avatar
    31 posts
    Member since:
    Apr 2009

    Posted 10 Mar 2011 Link to this post

    [Title should be: IE9 scroll bar bug (2011.1.225.40)]

    Hi,

    I ran into an issue with nested splitters in IE9 (RC).
    IE9 adds unnecessary scrollbars to a nested splitter.
    There are several ways to reproduce it:
    • Dock Pane A/B/C and/or dock Pane 1/2/3
    • Shrink the browser window (just a few pixels are enough)
    • Load the site in a very small browser window (I used a viewport size of 624*349 pixels for reproduction)

    The scrollbars disappear when you:

    • Undock a Pane (if you have docked a pane from each SlidingPaneZone scrollbars disappear as soon as you undock any pane)
    • Increase viewport size (just a little bit)

    This issue does not repro in IE7/8.

    Please see the attached screenschots and markup for further reference.

    <telerik:RadSplitter ID="RadSplitter1" Height="100%" HeightOffset="80" runat="server"
    BackColor="#30B8CF" ClientIDMode="AutoID" SplitBarsSize="" LiveResize="False"
    ResizeMode="Proportional" Width="100%" Orientation="Horizontal" VisibleDuringInit="false">
    <telerik:RadPane ID="TopPane" runat="server" Height="22px" Scrolling="none">
    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Height="22px">
    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Pane1" runat="server" Width="150px">
    Pane 1 Content a
    </telerik:RadSlidingPane>
    <telerik:RadSlidingPane ID="Radslidingpane2" Title="Pane2" runat="server" Width="150px">
    Pane 2 Content a
    </telerik:RadSlidingPane>
    <telerik:RadSlidingPane ID="Radslidingpane3" Title="Pane3" runat="server" Width="150px">
    Pane 3 Content a
    </telerik:RadSlidingPane>
    </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="Radsplitbar1" runat="server" />
    <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
    <telerik:RadSplitter ID="Radsplitter2" runat="server" Orientation="Vertical" LiveResize="False"
    ResizeMode="Proportional" VisibleDuringInit="false">
    <telerik:RadPane ID="LeftContentPane" Width="22px" runat="server">
    <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Width="22px" SlideDirection="Right">
    <telerik:RadSlidingPane ID="Radslidingpane4" Title="PaneA" runat="server" Height="150px">
    Pane1 B</telerik:RadSlidingPane>
    <telerik:RadSlidingPane ID="Radslidingpane8" Title="PaneB" runat="server" Height="150px">
    Pane2 B</telerik:RadSlidingPane>
    <telerik:RadSlidingPane ID="Radslidingpane9" Title="PaneC" runat="server" Height="150px">
    Pane3 B</telerik:RadSlidingPane>
    </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="Radsplitbar3" runat="server" />
    <telerik:RadPane ID="Radpane2" runat="server">
    <telerik:RadSplitter ID="RadSplitter3" Orientation="Horizontal" LiveResize="True"
    ResizeMode="Proportional" VisibleDuringInit="false" runat="server">
    <telerik:RadPane ID="RightContentPaneTop" runat="server">
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar4" runat="server" />
    <telerik:RadPane ID="RightContentPaneBottom" runat="server">
    Hello
    </telerik:RadPane>
    </telerik:RadSplitter>
    </telerik:RadPane>
    </telerik:RadSplitter>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar2" runat="server" />
    <telerik:RadPane ID="BottomPane" runat="server" Width="22px" Scrolling="None">
    </telerik:RadPane>
    </telerik:RadSplitter>
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Mar 2011 Link to this post

    Hi Jasper,

    This behavior occurs because the browser displays the scrollbars before the splitter calculate its new size and after that the second scrollbar shows up because the first one is taking part of the space. To avoid this problem you need to set Scrolling="None" to the parent pane, e.g.:
    <telerik:RadPane ID="Radpane2" runat="server" Scrolling="None">
        <telerik:RadSplitter ID="RadSplitter3" Orientation="Horizontal" LiveResize="True"
            VisibleDuringInit="false" runat="server">


    Greetings,
    Dobromir
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top