This is a migrated thread and some comments may be shown as answers.

Splitter height with Master pages resizes depending on Content page.

2 Answers 98 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Pino asked on 17 May 2008, 09:14 PM

I want my splitter to remain at 100% height of my browser page at all times. I have seen your examples where this can be achieved but when I adapt those examples to a Master page, content page scenario the splitter will never stay at a static 100% height and it always resizes to the height of the content page.

Below is the master page:

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FCi.master.cs" Inherits="fciweb.FCi" EnableTheming="true" %> 
        
            <%@ Register Assembly="Telerik.Web.UI, Version=2008.1.515.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 
        
                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">  
        
                <title>Untitled Page</title> 
        
                <style type="text/css">  
        
                    .style1  
        
                    {  
        
                        background-color: #FFB300;  
        
                        padding: 0;  
        
                        text-align: left;  
        
                        border-style: none;  
        
                    }  
        
                </style> 
        
            </head> 
        
              <body sstyle="margin:0px;height:100%;overflow:hidden;"s>     
        
                    <form id="Form1" method="post" runat="server" style="height:100%" >   
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
        
                     <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">  
        
                        <tr> 
        
                            <td class="style1">  
        
                                image  
        
                            </td> 
        
                            <td class="style1" style="text-align:right">  
        
                            login status  
        
                            </td> 
        
                        </tr> 
        
                        </table> 
        
                    <telerik:RadSplitter id="MainSplitter" runat="server"  height="100%" width="100%">  
        
                        <telerik:RadPane id="LeftPane" runat="server" Width="250px" Height="100%" >    
        
                                <!-- Place the content of the pane here -->    
        
                             <telerik:RadPanelBar ID="RadPanelBar1" Runat="server"   
        
                                    EnableAjaxSkinRendering="true" Skin="Default2006" > 
        
                                <collapseanimation duration="100" type="None" /> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem runat="server" Text="item1">  
        
                                    </telerik:RadPanelItem> 
        
                                    <telerik:RadPanelItem runat="server" Text="Click Me" NavigateUrl="test.aspx">  
        
                                    </telerik:RadPanelItem> 
        
                                    <telerik:RadPanelItem runat="server" Text="item2">  
        
                                    </telerik:RadPanelItem> 
        
                                    <telerik:RadPanelItem runat="server" Text="item3">  
        
                                    </telerik:RadPanelItem> 
        
                                    <telerik:RadPanelItem runat="server" Text="item4">  
        
                                    </telerik:RadPanelItem> 
        
                                    <telerik:RadPanelItem runat="server" Text="item5">  
        
                                    </telerik:RadPanelItem> 
        
                                    <telerik:RadPanelItem runat="server" Text="item6">  
        
                                    </telerik:RadPanelItem> 
        
                                </Items> 
        
                                <expandanimation duration="100" type="None" /> 
        
                            </telerik:RadPanelBar>   
        
                                </telerik:RadPane>   
        
                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />     
        
                        <telerik:RadPane ID="mainPane" runat="server" >    
        
                                <!-- Place the content of the pane here -->    
        
                               <asp:ContentPlaceHolder ID="main" runat="server"></asp:ContentPlaceHolder> 
        
                            </telerik:RadPane>    
        
                        </telerik:RadSplitter>   
        
                    </form>     
        
                </body>    
        
            </html>

Here is the empty Default page, load this up first to see sizing issue - i.e. splitter is not at 100% height.

    
            <%@ Page Language="C#" MasterPageFile="~/FCi.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="fciweb.Default" Title="Untitled Page" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="main" runat="server">  
        
            </asp:Content>

Finally, a content page (Click the Click Me link in the panel bar), that shows how the splitter resizes.

    
            <%@ Page Language="C#" MasterPageFile="~/FCi.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="fciweb.test" Title="Untitled Page" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="main" runat="server">  
        
                <div id="ContentDiv">  
        
                <br /> 
        
                top line here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                 <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                 <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                  <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                 <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                 <br /> 
        
                Content here  
        
                <br /> 
        
                Content here  
        
                <br /> 
        
                last line here  
        
                <br /> 
        
                </div> 
        
            </asp:Content>

Thanks very much.

Pino

2 Answers, 1 is accepted

answered on 19 May 2008, 08:47 AM

Hello Pino,

I examined your code and I suggest to add the following style in your MasetrPage's head section:

    
            <style type="text/css">  
        
                html, body, form  
        
                {  
        
                   height: 100%;  
        
                   padding: 0px;  
        
                   margin: 0px;  
        
                }  
        
                </style>

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Splitter height with Master pages resizes depending on Content page.

2 Answers, 1 is accepted