Rank 2
My nested splitters work fine in IE7, but in IE8 the panes in the nestedsplitter will not scroll if the containing pane is set to Scrolling="None". The pane at the bottom of this sample should scroll:
<telerik:RadSplitter ID="ExplorerSplitter" runat="server" Height="100%" Orientation="Vertical" Width="100%" HeightOffset="104" VisibleDuringInit="false" LiveResize="false" >
<telerik:RadPane CssClass="GridPane" ID="GridPane" runat="server" Scrolling="None" Height="100%" BackColor="white">
<telerik:RadSplitter ID="GridSplitter" runat="server" Height="100%" Orientation="Horizontal" Width="100%" VisibleDuringInit="false" LiveResize="false" BorderSize="0" CssClass="ExplorerGridSplitter">
<telerik:RadPane ID="GridListPane" runat="server" Scrolling="X" BorderWidth="0" BackColor="white" Height="100%">...
3 Answers, 1 is accepted
I tested your code in IE7, IE8 and FF and the result in all three browsers was the same - the RadPane displayed scrollbars. I have attached a screenshot of the result I get in IE8. Below is the code of the page that I used for my test:
| <head runat="server"> |
| <title></title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0px; |
| overflow: hidden; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadSplitter ID="ExplorerSplitter" runat="server" Height="100%" Orientation="Vertical" |
| Width="100%" HeightOffset="104" VisibleDuringInit="false" LiveResize="false"> |
| <telerik:RadPane ID="GridPane" runat="server" Scrolling="None" BackColor="white"> |
| <telerik:RadSplitter ID="GridSplitter" runat="server" Height="100%" Orientation="Horizontal" |
| Width="100%" VisibleDuringInit="false" LiveResize="false" BorderSize="0"> |
| <telerik:RadPane ID="GridListPane" runat="server" Scrolling="X" BorderWidth="0" BackColor="white" |
| Height="100%"><div style="width:2000px;">text</div> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Could you please post here the complete code of your test page, together with all the CSS that you use for the page and specify the exact version of the suite that you use? The additional styles that you apply to the RadPanes/RadSplitters may cause such problems.
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 2
My problem was with the width of the ScrollArea. I was setting the ScrollHeight with JavaScript to fill a SplitterPane that had Scrolling = "none". I found I also needed to set the width of the ScrollArea as well.
Rank 1
I too had the same problem and for others reading this post here is what I did:
This set up will maintain the verticle scroll bar on the left (y-scroll bar) of the browser and the bottom (x-scroll bar) only in the content RadPane so that when you put a really wide control such as a RadGrid that has many columns that reads left to right the scroll bar will appear at the bottom. Note the overflow: hidden for the styling of the form, body, html this will hide the outer scroll bars for browser window. Also note in the "ParentDivElement" (wrapper for all the splitters and panes) width and height has to be 100%.
Hope this code helps. I know I had a rough time that is why I am posting this solution. Let me know if you like it.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MyAccount_MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"> </telerik:RadStyleSheetManager> form, body, html { height: 99%; margin: 0px 0px 30px 0px; padding: 0px 0px 30px 0px; overflow: hidden; /*NEW: THIS REMAINS VISIABLE SEE BODY TAG BELOW */ } .style1 { color: #666666; } </style> </head> <body> <form id="form1" runat="server"> <div id="ParentDivElement" style="height: 100%; width:100%;"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1"> </telerik:RadScriptManager> <telerik:RadSplitter ID="MainRadSplitter" runat="server" Orientation="Horizontal" Width="100%" Height="100%" LiveResize="True"> <telerik:RadPane ID="LogoRadPane" runat="server" Height="50px" MaxHeight="55" MinWidth="1000" ForeColor="#CCCCCC"> <telerik:RadSplitter ID="LogoRadSplitter" runat="server" Height="170px" VisibleDuringInit="false"> <telerik:RadPane ID="ToolBarRadPane" runat="server" Locked="True" MaxHeight="65" MaxWidth="1000" MinWidth="150" Scrolling="None" Width="200px"> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> </asp:ContentPlaceHolder> </telerik:RadPane> <telerik:RadSplitBar ID="LogoRadSplitBar" runat="server" Width="100%"> </telerik:RadSplitBar> <telerik:RadPane ID="ToolBarMainRadPane" runat="server" MaxHeight="65" Scrolling="none" MinWidth="500"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitBarTop" runat="server" CollapseMode="Forward" Width="100%"> </telerik:RadSplitBar> <telerik:RadPane ID="MainRadPane" runat="server" MinWidth="500"> <telerik:RadSplitter ID="NestedRadSplitter" Runat="server" LiveResize="True" Width="100%"> <telerik:RadPane ID="LeftRadPane" Runat="server" MaxWidth="300" MinWidth="150" Width="200px"> <span style="color: #ff6600"></span> </telerik:RadPane> <telerik:RadSplitBar ID="VerticalRadSplitBar" runat="server" CollapseMode="Forward"> </telerik:RadSplitBar> <telerik:RadPane ID="ContentRadPane" runat="server" Width="100%"> <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server"> </asp:ContentPlaceHolder> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </div> </form> </body> </html> Bill H. (2 year telerik customer)
www.MHEControl.com