Hello
scrollbars appears in IE8 after expanding slidingpane, any advice how to fix this problem?
sliding pane problem
Thanks
scrollbars appears in IE8 after expanding slidingpane, any advice how to fix this problem?
sliding pane problem
| <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>test</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| width: 100%; |
| margin: 0; |
| padding: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="WebBlue"> |
| </telerik:RadSkinManager> |
| <telerik:RadSplitter runat="server" ID="mainSplitter" Width="100%" Height="100%" |
| Orientation="Horizontal" BorderSize="1"> |
| <telerik:RadPane runat="server" ID="header" Height="50px"> |
| header |
| </telerik:RadPane> |
| <telerik:RadPane runat="server" ID="body" Scrolling="None"> |
| <telerik:RadSplitter ID="rsSplitter" runat="server" Width="100%" Height="100%" VisibleDuringInit="false"> |
| <telerik:RadPane ID="menuPane" runat="server" Width="22px" Height="100%" Scrolling="None" |
| BackColor="#CC3300"> |
| <telerik:RadSlidingZone ID="SlidingZone" runat="server" Width="22px" Height="100%" |
| ClickToOpen="True"> |
| <telerik:RadSlidingPane ID="Menu" Title="Menu" runat="server" Width="220px" MaxWidth="220" |
| Scrolling="Y"> |
| <telerik:RadTreeView ID="TreeView_MainMenu" runat="server" ShowLineImages="false"> |
| </telerik:RadTreeView> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadPane ID="contentPane" runat="server" Height="100%"> |
| <asp:ContentPlaceHolder ID="contentMain" runat="server"> |
| </asp:ContentPlaceHolder> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
| </html> |
1 Answer, 1 is accepted
0
Hello Yano,
In order to fix the problem, please hide the overflow of the page - if scrollbars are needed, the splitter will generate them:
All the best,
Svetlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
In order to fix the problem, please hide the overflow of the page - if scrollbars are needed, the splitter will generate them:
<style type="text/css"> html, body, form { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } </style>On a side note, I also prepared the following notes which can help you improve the code further:
- Do not set any sizes to the nested splitters if they are directly nested in a RadPane - when a RadSplitter is directly nested in a RadPane, it automatically resizes itself to occupy 100% of the parent pane. If you set width, height, fullscreenmode, the splitters will make a lot of calculations to resize themselves and this is not necessary and slows down the performance without any benefit.
- when you have a vertical RadSplitter, do not set the Height of the child RadPanes (the same for a horizontal splitter and width) due to the above explained performance consideration
I hope that my reply is helpful, let me know how it goes.All the best,
Svetlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.