Could anyone help me one resizing the Vertical Dimension?

5 posts, 0 answers
  1. jian
    jian avatar
    4 posts
    Member since:
    Mar 2009

    Posted 28 Apr 2009 Link to this post

    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:
    <%@ 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>    
     
    BTW, how do I attach pictures?

    Thanks

  2. jian
    jian avatar
    4 posts
    Member since:
    Mar 2009

    Posted 28 Apr 2009 Link to this post

    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?
    <%@ 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> 
     
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Apr 2009 Link to this post

    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:

    1. Set explicit size to all the parent elements of the splitter - including the DIV which wraps the content of the page.
    2. 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.
  5. Ben
    Ben avatar
    7 posts
    Member since:
    Jun 2008

    Posted 13 May 2009 Link to this post

    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.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 14 May 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017