This is a migrated thread and some comments may be shown as answers.

IE9

1 Answer 115 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Jasper asked on 10 Mar 2011, 07:44 PM

expected.PNG

result.PNG

[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 />

</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>

1 Answer, 1 is accepted

Accepted

answered on 14 Mar 2011, 02:11 PM

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!