Fullscreen mode + Vista skin = scrollbars

[Aldert]

Hi,

I am using a RadSplitter to divide the page horizontally in a top section and content section. The content section has a RadSplitter as well, to divide it vertically in a sliding zone on the left and a "main" area, which will held the actual page's content.

Using the default skin, this works excellent, but switching to the Vista skin, I get scrollbars in the lower section. This happens on IE7, FF3 and Safari (not tested on other browsers).

The code I'm using:

---

 
<form id="form1" runat="server"> 
 
<telerik:RadScriptManager ID="ScriptManager1" runat="server"> 
 
</telerik:RadScriptManager> 
 
<telerik:RadSplitter ID="RadSplitter1" runat="server" FullScreenMode="True" Orientation="Horizontal" 
 
BorderSize="0" BackColor="Transparent" VisibleDuringInit="False" 
 
PanesBorderSize="0" SplitBarsSize="" EnableEmbeddedSkins="true" Skin="Vista"> 
 
<telerik:RadPane ID="RadPane1" runat="server" Height="60"> 
 
</telerik:RadPane> 
 
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false" Visible="false" /> 
 
<telerik:RadPane ID="RadPane2" runat="server"> 
 
<telerik:RadSplitter ID="RadSplitter2" runat="server" VisibleDuringInit="false" EnableEmbeddedSkins="true" 
 
Skin="Vista"> 
 
<telerik:RadPane ID="RadPane3" runat="server" Width="25" Locked="true"> 
 
<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="25" ClickToOpen="true"> 
 
<telerik:RadSlidingPane ID="RadSlidingPane1" Title="Zone 1" runat="server" Width="200" 
 
TabView="TextOnly" MaxWidth="200" MinWidth="200" EnableResize="false"> 
 
</telerik:RadSlidingPane> 
 
<telerik:RadSlidingPane ID="RadSlidingPane2" Title="Zone 2" runat="server" Width="200" 
 
TabView="TextOnly" MaxWidth="200" MinWidth="200" EnableResize="false"> 
 
</telerik:RadSlidingPane> 
 
<telerik:RadSlidingPane ID="RadSlidingPane3" Title="Zone 3" runat="server" Width="200" 
 
TabView="TextOnly" MaxWidth="200" MinWidth="200" EnableResize="false"> 
 
</telerik:RadSlidingPane> 
 
</telerik:RadSlidingZone> 
 
</telerik:RadPane> 
 
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" Visible="false" /> 
 
<telerik:RadPane ID="RadPane4" runat="server"> 
 
</telerik:RadPane> 
 
</telerik:RadSplitter> 
 
</telerik:RadPane> 
 
</telerik:RadSplitter> 
 
</form> 
 

Is there a suggested fix for this or am I doing something wrong?

[Svetlina Anati]

Hello Aldert,

When you have a splitter nested in a RadPane, you should set the parent RadPane's Scrolling property to None in order to avoid having additional scrollbars - the scrollbars you reprot are not needed and they are generated by the RadPane. If the nested splitter's content needs scrollbars, the splitter itself will generate them, otherwise double scrollbars will appear. The undesired scrollbars in your case come from the fact that the nested splitter occupies 100% of the parent RadPane and due to having a border, the size exceeds the RadPane's content size.

This being said you should modify your code in the following manner:

        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="false" Visible="false" />
        <telerik:RadPane ID="RadPane2" runat="server" Scrolling=None>
            <telerik:RadSplitter ID="RadSplitter2" runat="server" VisibleDuringInit="false" EnableEmbeddedSkins="true"
                Skin="Vista">
                <telerik:RadPane ID="RadPane3" runat="server" Width="25" Locked="true">
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="25" ClickToOpen="true">

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.