Set content between Sticky Header and Footer

2 posts, 0 answers
  1. Heng Lin
    Heng Lin avatar
    1 posts
    Member since:
    Apr 2014

    Posted 08 Apr 2015 Link to this post

    Hi, I was able to set sticky header and footer with Pagelayout In Master page. However, the child page do not in between the header and footer.

    The child page in the content place holder  display in the whole browser with the  header and footer appear front of it. Anywhere I could get the child page appear between the sticky header and footer, and the child page will  scroll when overflow. Thanks

     I'm using Visual studio 2010 with .net framework 4.0.

    OS:Windows 7

    Browser: IE 10

    Telerik version:2015.1.225.40

    Preferred programming language: VB.NET

    Below are my code for Master page and child page

     

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Responsive.master.vb" Inherits="GMAT.Responsive" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <meta http-equiv="Page-Enter" content="blendTrans(Duration=.5)" />
        <meta http-equiv="Page-Exit" content="blendTrans(Duration=.5)" />
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" />
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Styles/jquery-ui/css/cupertino/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
     
        <script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
        <script src="scripts/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
        <script src="scripts/jquery.sessionTimeout.js" type="text/javascript"></script>
         
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style type="text/css">
        .header1 {
            background-color: black;
            position:fixed;
            width:100%;
            top:0;
            z-index:1000;
        }
     
        .header2 {
            background-color: #E8EAEC;
        }
     
        .header3 {
            background: linear-gradient(#FDFEFE, #F0F2F4) repeat scroll 0 0 rgba(0, 0, 0, 0);
        }
     
     
        .content {
        }
     
        .article2 {
            background-color: #EEF1F3;
        }
     
        .footer {
            background-color: black;
        }
     
        html,
        body,
        form {
            margin: 0;
            padding: 0;
            height: 100%;
        }
     
        .container {
            min-height: 100%;
            position: relative;
        }
     
     
        .allContent {
            padding-top:40px;
            padding-bottom: 84px; /* Height of the footer */
        }
     
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 84px; /* Height of the footer */
            background: black;
        }
    </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="TSM_CMS_MAIN" runat="server">
        </asp:ToolkitScriptManager>
         
            <div>
        <telerik:RadPageLayout runat="server" ID="PageLayoutMaster" HtmlTag="None" GridType="Fluid" >
        <Rows>
            <telerik:LayoutRow RowType="Generic" CssClass="container">
                <Rows>
                    <telerik:LayoutRow RowType="Generic" CssClass="allContent">
                        <Rows>
                            <telerik:LayoutRow RowType="Container" WrapperCssClass="header1" WrapperHtmlTag="Div">
                                <Columns>
                            <%--Logo--%>
                            <telerik:LayoutColumn Span="2" SpanMd="3" SpanSm="12" SpanXs="12">
                                <a href="#" class="logo">
                                    <img src="images/logo1.jpg" alt="logo"/>
                                </a>
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="2" SpanMd="2" SpanSm="12" SpanXs="12">                           
                            <div class="title_main2">
                                <h1>
                                    Testing
                                </h1>
                             </div>
                            </telerik:LayoutColumn>
                            <%--Main Nav--%>
                            <telerik:LayoutColumn Span="8" SpanMd="7" SpanSm="12" SpanXs="12">
                                <telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Auto" EnableRoundedCorners="true" EnableSelection="true" EnableShadows="true"  >
                                    <Items>
                                        <telerik:RadMenuItem Text="Home" NavigateUrl="Default.aspx" />
                                        <telerik:RadMenuItem IsSeparator="true" />
                                        <telerik:RadMenuItem Text="Grid Page" NavigateUrl="Grid.aspx" />
                                        <telerik:RadMenuItem IsSeparator="true" />
                                        <telerik:RadMenuItem Text="ListView Page" NavigateUrl="ListView.aspx" />
                                        <telerik:RadMenuItem IsSeparator="true" />
                                        <telerik:RadMenuItem Text="testing" NavigateUrl="testing.aspx"  />
                                        <telerik:RadMenuItem IsSeparator="true" />
                                        <telerik:RadMenuItem Text="Projects" />
                                    </Items>
                                </telerik:RadMenu>
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="12" SpanMd="12" SpanSm="12" SpanXs="12">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                                    </asp:ContentPlaceHolder>
                            </telerik:LayoutColumn>
                                </Columns>
                            </telerik:LayoutRow>
                            <telerik:LayoutRow RowType="Container"  WrapperCssClass="content" WrapperHtmlTag="Div" HtmlTag="None">
                                <Content>
                                    <telerik:RadPageLayout runat="server" ID="PageLayoutConent" HtmlTag="None" GridType="Fluid">
                                        <Rows>
                                            <telerik:LayoutRow RowType="Container" WrapperCssClass="article1" WrapperHtmlTag="Div">
                                                <Content>                                               
                                                     
                                                </Content>
                                            </telerik:LayoutRow>
                                        </Rows>
                                    </telerik:RadPageLayout>
                                </Content>
                            </telerik:LayoutRow>
                        </Rows>
                    </telerik:LayoutRow>
     
                    <telerik:LayoutRow RowType="Container" WrapperCssClass="footer" WrapperHtmlTag="Div">
                        <Content>
                            <div style="height: 84px"><a style="color: white">Sticky footer</a></div>
                        </Content>
                    </telerik:LayoutRow>
                </Rows>
            </telerik:LayoutRow>
     
        </Rows>
    </telerik:RadPageLayout>
            </div>
        </form>
    </body>
    </html>

     

     

     

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Responsive.Master" CodeBehind="ResponsivePage.aspx.vb" Inherits="GMAT.ResponsivePage" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
            <div>
                    <table border="1px" height="1000px" style="width:100%">
                        <tr>
                            <td style="float:left;text-align:justify;font-size:0.9em;vertical-align:bottom;">
                                 
                            </td>
                            <td style="float:right;text-align:justify;font-size:0.9em; color:White;">
                               The First line
                            </td>
                        </tr>
                        <tr>
                            <td style="float:left;text-align:justify;font-size:0.9em;">
                                 
                            </td>
                            <td style="float:right;text-align:justify;font-size:0.9em;vertical-align:bottom;">
                                © Second line:
                                 
                                 
                                 
                            </td>
                        </tr>
                        <tr>
                            <td style="float:left;text-align:justify;font-size:0.9em;">
                                 
                            </td>
                            <td style="float:right;text-align:justify;font-size:0.9em;vertical-align:bottom;">
                                © The Last line
                                 
                                 
                                 
                            </td>
                        </tr>
                    </table>
                    </div>
    </asp:Content>

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 08 Apr 2015 Link to this post

    Hello Heng Lin,

    I have noticed that the ContentPlaceHolderID of the content page is set to "head", so the content is added to the <head> tag instead to the body.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top