We've been working with the Telerik controls for a while now, without all that much difficulty, but the Splitter really seems to not be working as desired. Our client, as most would, want their site to display at any resolution in IE6, and there will be multiple pages where the body content will surpass the normal screen bounds due to very large RadGrids.
Anyways, we have an expanding RadSplitter sandwiched between a header and a footer, with no scrolling for the actual RadPanes. So far, this set up has worked well until now. Testing the site in FF3 presents us with a nice layout that extends the height of the content which it should. Also, anytime we collapse or expand any Panelbars within the RadPane, the content page will expand or collapse, and the splitter, and thereby the window, will expand or shrink.
In IE6 however, the Splitter looks as though it calculates the correct height on INIT, but then shrinks to the same height on every page, regardless of how much content. Expanding or collapsing the Panelbars only reveals content in this small 'view'; it does not actually resize the RadPane at all.
I know there are inconsistencies between browsers, but juggling this large of a difference is a pain and very draining to diagnose. If there is a way to cancel that after Init resize, I imagine it would work.
| <%-- |
| $Date$ |
| $Author$ |
| $Revision$ |
| (C)2008 CGI, Inc. |
| THIS PROGRAM IS PROPRIETARY AND IS THE PROPERTY OF: CGI, INC |
| COPYING OR USE OF THIS PROGRAM, EXCEPT AS SPECIFICALLY PROVIDED FOR IN A |
| LICENSE AGREEMENT CONTROLLING SUCH USE, IS PROHIBITED. |
| This program is designated as CONFIDENTIAL and is a trade secret under |
| applicable laws. Unauthorized copying or disclosure is prohibited and is |
| subject to criminal and civil penalties, including fines and imprisonment. |
| --%> |
| <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="ReachMasterPage" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!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 runat="server" id="HeadMaster"> |
| <title></title> |
| <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> |
| </head> |
| <body> |
| <form id="form1" runat="server" method="post"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| </telerik:RadAjaxManager> |
| <div id="master_page"> |
| <div id="master_header_top"> |
| <div id="master_icon"> |
| <asp:Image ID="imgCgiLogo" runat="server" ImageUrl="~/Images/cgilogo.gif" /> |
| </div> |
| <div id="master_login" style="height: 22px"> |
| <span style="font-size: 11pt; font-weight:bold; color: red; font-family: 'Times New Roman';">Welcome Paul!</span> <span style="font-size: 8pt; color: blue; font-family: 'Times New Roman'; text-decoration: underline">Logout</span> |
| </div> |
| <div id="master_header_right"> |
| <asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="Breadcrumb" PathSeparator=" : " > |
| <PathSeparatorStyle Font-Bold="True" ForeColor="#FFFFFF" /> |
| <CurrentNodeStyle ForeColor="#FFFFFF" /> |
| <NodeStyle Font-Bold="True" ForeColor="#FFFFFF" CssClass="Breadcrumb" /> |
| <RootNodeStyle Font-Bold="True" ForeColor="#FFFFFF" CssClass="Breadcrumb" /> |
| </asp:SiteMapPath> |
| </div> |
| </div> |
| <div id="master_middle"> |
| <telerik:RadSplitter id="RadSplitter1" runat="server" Height="100%" Width="1500px" VisibleDuringInit="false" ResizeMode="EndPane" ResizeWithParentPane="true" ResizeWithBrowserWindow="true" Skin="Office2007"> |
| <telerik:RadPane id="Radpane1" runat="server" Width="22px" Scrolling="None" Height="800px"> |
| <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22px" DockedPaneId="Nav" ExpandedPaneId="Nav" SlideDirection="Right"> |
| <telerik:RadSlidingPane id="Nav" Height="800px" title="Navigation" runat="server" Width="173px" Scrolling="Both" CssClass="slideContainer"> |
| <telerik:RadAjaxPanel ID="NavRadAjaxPanel" runat="server"> |
| <div> |
| <div style="float:right; padding-right:2px;"> |
| <asp:LinkButton ID="lnkbtnExpandAll" runat="server" CssClass="TreeNodeLinkButton" OnClick="lnkbtnExpandAll_Click">Expand All</asp:LinkButton> |
| <asp:LinkButton ID="lnkbtnCollapseAll" runat="server" CssClass="TreeNodeLinkButton" OnClick="lnkbtnCollapseAll_Click">Collapse All</asp:LinkButton> |
| </div> |
| <div style="clear:both; overflow:hidden;"> |
| <telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SiteMapDS" DataFieldID="Title" DataNavigateUrlField="Url" DataTextField="Title" SingleExpandPath="False" CssClass="TreeNode" Width="100%" style="white-space:normal;" BackColor="White" Font-Size="8pt" Skin="Outlook"> |
| <CollapseAnimation Duration="100" Type="OutQuint" /> |
| <ExpandAnimation Duration="100" /> |
| </telerik:RadTreeView> |
| </div> |
| </div> |
| </telerik:RadAjaxPanel> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar id="Radsplitbar3" runat="server" CollapseMode="Forward" /> |
| <telerik:RadPane ID="MasterPageRadContentPane" runat="server" MinHeight="1000" MinWidth="800" Scrolling="None"> |
| <div id="master_contenttitle"> |
| <asp:Label ID="lblContentTitle" runat="server" Font-Bold="True" Font-Size="12pt"></asp:Label> |
| </div> |
| <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> |
| </asp:ContentPlaceHolder> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| <div id="master_footer"> |
| Copyright CGI 2008 |
| </div> |
| </div> |
| <asp:SiteMapDataSource ID="SiteMapDS" runat="server" SiteMapProvider="REACHSiteMap" /> |
| </form> |
| </body> |
| </html> |
Style Sheet
| body, p, h1, h2, h3, h4, table |
| { |
| font-size:10pt; |
| font-family:Tahoma, Arial; |
| margin:0; |
| padding:0; |
| border:none; |
| } |
| body |
| { |
| /*background: #B4B4B4 url(images/body_bg.gif) repeat left top;*/ |
| height:100%; |
| width:100%; |
| font-size:10pt; |
| font-family:Arial; |
| } |
| #master_page |
| { |
| height:100%; |
| } |
| /* Header Layout */ |
| #master_header_top |
| { |
| background-color: #110E93; |
| width:100%; |
| border-bottom:solid 1px Gray; |
| } |
| #master_header_left |
| { |
| height:100%; |
| width:250px; |
| float:left; |
| } |
| #master_icon |
| { |
| clear:both; |
| width: 100%; |
| height: 55px; |
| background-color:White; |
| } |
| #master_header |
| { |
| background-color: #C8D6E6; |
| } |
| #master_header_right |
| { |
| padding-top: 3px; |
| height: 22px; |
| padding-bottom: 0px; |
| } |
| #master_header_right_top |
| { |
| width:100%; |
| height:55px; |
| background-color:White; |
| } |
| #master_login |
| { |
| background-color: #C8D6E6; |
| padding-top:2px; |
| padding-left:5px; |
| width: 200px; |
| height:22px; |
| float:left; |
| clear:both; |
| } |
| /* Middle Section Layout */ |
| #master_middle |
| { |
| } |
| #master_menu |
| { |
| /*float:left;*/ |
| } |
| .master_contentbody |
| { |
| } |
| #master_contenttitle |
| { |
| width:70%; |
| margin-left:10px; |
| border-bottom: solid 2px #888888; |
| } |
| /* Footer */ |
| #master_footer |
| { |
| background-color: #110E93; |
| font-size:8pt; |
| width:100%; |
| height:18px; |
| padding-top:2px; |
| padding-left:45%; |
| clear:both; |
| color:White; |
| } |
| /* Tree style RadGrid styles */ |
| .OutlookTopBar |
| { |
| background-color: white; |
| background-repeat: repeat-x; |
| padding-top: 3px; |
| border: 1px solid #002D96; |
| width: 180px; |
| font-size: 11px; |
| padding-left: 4px; |
| } |
| .TreeviewGrid Table |
| { |
| margin-top: 7px; |
| border:0px; |
| } |
| .TreeviewGrid a |
| { |
| color: #000000; |
| text-decoration: underline; |
| } |
| .TreeviewGrid td |
| { |
| font-size: 11px; |
| border:0px; |
| } |
| .SelectedFolder |
| { |
| font-weight: bold; |
| } |
| .OutlookTable |
| { |
| background-color:#c4dafa; |
| margin-top:4px; |
| } |
| .MailSubject |
| { |
| color: #808080; |
| } |
| .SelectedRow_Outlook .MailSubject |
| { |
| color: white; |
| } |
| /* Styles for the Treeview on the master page */ |
| .TreeMenu |
| { |
| font-family:Arial; |
| background-color:White; |
| color:#678CB9; |
| width:210px; |
| } |
| .TreeNodeLinkButton |
| { |
| color:#15428B; |
| text-decoration:none; |
| font-size:7pt; |
| } |
| .TreeNode |
| { |
| color:#15428b; |
| } |
| .TreeNode a |
| { |
| color:#15428b; |
| background-color:White; |
| } |
| .TreeNode a:visited |
| { |
| color:#15428b; |
| background-color:White; |
| } |
| .TreeNode a:hover |
| { |
| text-decoration:none; |
| color:Red; |
| background-color:White; |
| } |
| .TreeNode a:active |
| { |
| color:Red; |
| background-color:White; |
| } |
| .slideContainer { |
| border:0px solid #073b96; |
| border-collapse:collapse; |
| background-color:White; |
| } |
| #master_content |
| { |
| width:100%; |
| height:80%; |
| float:left; |
| clear:both; |
| margin-left:10px; |
| } |
| .master_menu |
| { |
| } |
| div.menuTables |
| { |
| font-size:10pt; |
| font-family:Arial; |
| font-weight:bold; |
| } |
| table.menuTables |
| { |
| margin-left:20px; |
| margin-top:20px; |
| border:0; |
| } |
| table.menuTables td |
| { |
| width:615px; |
| } |
| table.useHeaderMenu |
| { |
| margin-left:10px; |
| } |
| table.useHeaderMenu td |
| { |
| vertical-align:top; |
| font-size:7pt; |
| } |
| table.useHeaderMenu a |
| { |
| text-decoration:none; |
| } |
| table.formFields |
| { |
| } |
| .collapsible |
| { |
| font-size:8pt; |
| font-family:Arial; |
| vertical-align:middle; |
| margin-top:10px; |
| margin-left:10px; |
| margin-bottom:10px; |
| margin-right:10px; |
| whitewhite-space: normal !important; |
| } |
| .collapsible img.handle |
| { |
| text-align:rightright; |
| MARGIN-TOP: 5px; |
| margin-right:20px; |
| margin-left:300px; |
| position:relative; |
| } |
| .invisible |
| { |
| display:none; |
| visibility:hidden; |
| } |
| .visible |
| { |
| visibility:visible; |
| } |
| .TabStrip |
| { |
| border:solid 1px Gray; |
| } |
| .PageView |
| { |
| vertical-align:middle; |
| padding-top:10px; |
| margin-left:10px; |
| margin-bottom:10px; |
| margin-right:10px; |
| whitewhite-space: normal !important; |
| } |
| .Breadcrumb |
| { |
| font:bold 11px Arial, Verdana, Sans-serif; |
| padding-left: 5px; |
| margin-top: 2px; |
| } |
| .Breadcrumb a |
| { |
| text-decoration:none; |
| } |
| .Breadcrumb a:hover |
| { |
| text-decoration:underline; |
| } |
| ThresholdLabel |
| { |
| font-weight:bold; |
| } |
Very discouraging. But hopefully, with your knowledge and my cooperation, we can figure this out.
Thanks a lot.
4 Answers, 1 is accepted
0
Hi Adam,
I tried to test your code but I had to comment some of it in order to successfully run it and I am also not quite sure that I understand you correctly. What I can suggest to do to get the same behavior under all browsers is the following:
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I tried to test your code but I had to comment some of it in order to successfully run it and I am also not quite sure that I understand you correctly. What I can suggest to do to get the same behavior under all browsers is the following:
- Include this CSS in the page's head:
<style type="text/css"> html, body, form { height: 100%; padding: 0px; margin: 0px; } </style> - I recommend to use the RadSplitter's HeightOffset property and set it to the resultant sum of the heights of the header and the footer. This will ensure that the splitter will always occupy the all available space except for the header and footer.
- As far as I understood, you expect the RadSplitter to resize according to its content, e.g when you expand/collapse the RadPanelBar. This functionality is not available for the RadSplitter out of the box, but you can easily achieve the desired behavior by using javascript as discussed here.
If you need further assistance, please open a new support ticket and send me a sample, reproduction demo along with a detailed explanation of the reproduction steps and some screenshots. Once I receive this information, I will do my best to help.
Sincerely yours,Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Adam
Top achievements
Rank 1
Rank 1
answered on 11 Aug 2008, 06:34 PM
Though I believe that link is broken for me, so far so good. The only problem I'm having now is that a resize on load is not enough. I'm going to have to wire it up in such a way that some events inside the content panel, like changing the paging size of a grid inside the panel bar, collapsing or expanding a panel, etc. will also trigger a resize of the master page splitter. If there's a good way you know of to do this, please let me know.
Thanks for the help so far,
Adam.g
0
Hi Adam,
Yes, you are correct for the link - I just fixed it to point to the correct address. For your convenience, I give you the link here as well.
As for your additional question - you can either execute a method every 100 milliseconds, for example (you can use the setInterval method), that will check whether the scrollHeight of the RadPane has changed (in case it has - recalculate the height of the splitter), or handle all events that might change the scrollHeight of the RadPane. Please note that this is not connected to the RadSplitter control and the best implementation depends on your particular scenario.
All the best,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Yes, you are correct for the link - I just fixed it to point to the correct address. For your convenience, I give you the link here as well.
As for your additional question - you can either execute a method every 100 milliseconds, for example (you can use the setInterval method), that will check whether the scrollHeight of the RadPane has changed (in case it has - recalculate the height of the splitter), or handle all events that might change the scrollHeight of the RadPane. Please note that this is not connected to the RadSplitter control and the best implementation depends on your particular scenario.
All the best,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Adam
Top achievements
Rank 1
Rank 1
answered on 14 Aug 2008, 12:24 PM
Actually, I'm sorry for not posting a response earlier but, while we haven't discovered any method for getting the width to expand with content, we've discovered a codeless method for height expansion with content, which is supported! As I stated earlier, FF3 and IE7 supported this naturally; it was only IE6 that we had a problem with. With Scrolling="None", if I remember correctly, the RadPane's div overflow CSS property gets set to hidden.
However, if you set a CssClass on the RadPane, and within that class you set
overflow: visible !important; to the class..voila! IE6 handles the Splitter height precisely as we expect it to. I'm sure you can imagine how happy we were to see that we did not have to hack our way or programmatically alter our heights. Hopefully this helps anyone wishing to gain the same behavior out of the RadSplitter.
I haven't researched the width problem much, and we aren't in a current position to worry about it much yet, so please feel free to consider this thread answered. Thanks so much for your guidance.
Adam.g