I read another thread:http://www.telerik.com/community/forums/aspnet-ajax/splitter/vertical-dimension-not-resizing-at-all.aspx#810082, but didn't get it working.
I have a very similar problem as hiss. I am trying to make a page with the head panel, and a split control under it. The width of both of them are set, however, i would like to resize the height of the split controls when I resize the windows. I made the height as 100%, but when i resize the windows, nothing happens. Could anyone help me here?
Here is my master page which contains the split control:
BTW, how do I attach pictures?
Thanks
I have a very similar problem as hiss. I am trying to make a page with the head panel, and a split control under it. The width of both of them are set, however, i would like to resize the height of the split controls when I resize the windows. I made the height as 100%, but when i resize the windows, nothing happens. Could anyone help me here?
Here is my master page which contains the split control:
| <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Basic.master.cs" Inherits="QuarkDocMngWeb.MasterPages.Basic" %> |
| <%@ 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"> |
| <script type="text/javascript" language="javascript"> |
| function OnClientLoaded(sender, args) { |
| sender.get_element().style.visibility = 'inherit'; |
| } |
| </script> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head id="Head1" runat="server"> |
| <title>Quark Document Management Web</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0px; |
| padding: 0px; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"> |
| </asp:ScriptManager> |
| <div class="main"> |
| <asp:Panel ID="Panel1" runat="server" Height="110" Width="1035" Scrolling="None" BorderStyle="None"> |
| <asp:contentplaceholder ID="HeaderContent" runat="server"> |
| </asp:contentplaceholder> |
| </asp:Panel> |
| <telerik:radsplitter id="RadSplitter1" Orientation="Vertical" runat="server" EnableViewState="true" |
| PanesBorderSize="0" FullScreenMode="false" Width="1018" BorderStyle="None" BorderWidth="0" |
| BorderColor="White" BorderSize="0" Height="100%" HeightOffset="110" VisibleDuringInit="false" OnClientLoaded="OnClientLoaded"> |
| <telerik:radpane id="LeftPane" runat="server" Height="100%" width="250" BackColor="#f8f7f5"> |
| <asp:contentplaceholder ID="LeftContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| <telerik:radsplitbar id="RadSplitBar1" runat="server" collapsemode="Forward"></telerik:radsplitbar> |
| <telerik:radpane id="Radpane1" runat="server" Height="100%" width="768"> |
| <asp:contentplaceholder ID="MainContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| </telerik:radsplitter> |
| </div> |
| </form> |
| </body> |
| </html> |
Thanks
4 Answers, 1 is accepted
0
jian
Top achievements
Rank 1
Rank 1
answered on 28 Apr 2009, 11:34 PM
I updated my code as follows: however i got an inner exception:
[System.Web.UI.HtmlControls.HtmlHead] = {InnerText = '((System.Web.UI.HtmlControls.HtmlContainerControl)(oPage.Controls[0].Controls._controls[0])).InnerText' threw an exception of type 'System.Web.HttpException'}
"Cannot get inner content of Head1 because the contents are not literal."
could any one help me?
[System.Web.UI.HtmlControls.HtmlHead] = {InnerText = '((System.Web.UI.HtmlControls.HtmlContainerControl)(oPage.Controls[0].Controls._controls[0])).InnerText' threw an exception of type 'System.Web.HttpException'}
"Cannot get inner content of Head1 because the contents are not literal."
could any one help me?
| <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Basic.master.cs" Inherits="QuarkDocMngWeb.MasterPages.Basic" %> |
| <%@ 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 id="Head1" runat="server"> |
| <title>Quark Document Management Web</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0px; |
| padding: 0px; |
| } |
| </style> |
| </head> |
| <script type="text/javascript" language="javascript"> |
| function OnClientLoaded(sender, args) { |
| sender.get_element().style.visibility = 'inherit'; |
| } |
| function resized() { |
| var splitter = $find("<%=RadSplitter1.ClientID%>"); |
| if (navigator.appName == "Microsoft Internet Explorer") { |
| if ((document.documentElement.clientHeight - 120) > 0) { |
| splitter.set_height(document.documentElement.clientHeight - 120); |
| } |
| } |
| else { |
| if ((window.innerHeight - 120) > 0) { |
| splitter.set_height(window.innerHeight - 120); |
| } |
| } |
| } |
| window.onresize = resized; |
| </script> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"> |
| </asp:ScriptManager> |
| <div class="main"> |
| <asp:Panel ID="Panel1" runat="server" Width="1035" Height="120" Scrolling="None" BorderStyle="None"> |
| <asp:contentplaceholder ID="HeaderContent" runat="server"> |
| </asp:contentplaceholder> |
| </asp:Panel> |
| <telerik:radsplitter id="RadSplitter1" Orientation="Vertical" runat="server" EnableViewState="true" |
| PanesBorderSize="0" FullScreenMode="false" Width="1018" BorderStyle="None" BorderWidth="0" |
| BorderColor="White" BorderSize="0" Height="100%" HeightOffset="120" VisibleDuringInit="false" OnClientLoaded="OnClientLoaded"> |
| <telerik:radpane id="LeftPane" runat="server" Height="100%" width="250" BackColor="#f8f7f5"> |
| <asp:contentplaceholder ID="LeftContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| <telerik:radsplitbar id="RadSplitBar1" visible="true" runat="server" collapsemode="Forward"></telerik:radsplitbar> |
| <telerik:radpane id="Radpane1" runat="server" Height="100%" width="768"> |
| <asp:contentplaceholder ID="MainContent" runat="server"> |
| </asp:contentplaceholder> |
| </telerik:radpane> |
| </telerik:radsplitter> |
| </div> |
| </form> |
| </body> |
| </html> |
0
Hi jian,
I built a test page based on your code but I was not able to reproduce the error. However, I was able to reproduce the incorrect resize behavior.
You do not have to write custom code to make the splitter resize along with the browser - this functionality is embedded in the control itself. Your splitter did not resize correctly because of its configuration - in order to get the desired behavior you should do the following:
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I built a test page based on your code but I was not able to reproduce the error. However, I was able to reproduce the incorrect resize behavior.
You do not have to write custom code to make the splitter resize along with the browser - this functionality is embedded in the control itself. Your splitter did not resize correctly because of its configuration - in order to get the desired behavior you should do the following:
- Set explicit size to all the parent elements of the splitter - including the DIV which wraps the content of the page.
- When you resize the browser, the splitter gets smaller and since you have hard coded the size of the panes in px, their height sum gets bigger than possible and this causes teh problem. I suggest to leave only one of the panes with fixed size and the other one will automatically calculate its size depending on the browser size.
For your convenience I attached your modified code.
Kind regards,Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Ben
Top achievements
Rank 1
Rank 1
answered on 13 May 2009, 09:26 PM
I had trouble resolving my splitter vertical size, even after setting all the width/heights as instructed.
I use master/detail pages. I found I had to give the <div> element an ID attribute. I had seen it in the demo code, but didn't think it was needed.
It solved my issue.
I use master/detail pages. I found I had to give the <div> element an ID attribute. I had seen it in the demo code, but didn't think it was needed.
It solved my issue.
0
Hi Ben,
I am glad that you solved your problem but I believe that setting an ID to a wrapper DIV element is not related to the RadSplitter height. However, if you set an ID and use it in order to set an explicit height through CSS instead of class or inline style, this is a possible solution but it still concerns the height and not the ID of the element.
In case you have further questions or you need assistance, do not hesitate to contact us.
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I am glad that you solved your problem but I believe that setting an ID to a wrapper DIV element is not related to the RadSplitter height. However, if you set an ID and use it in order to set an explicit height through CSS instead of class or inline style, this is a possible solution but it still concerns the height and not the ID of the element.
In case you have further questions or you need assistance, do not hesitate to contact us.
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.