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

Set content between Sticky Header and Footer

1 Answer 336 Views

PageLayout

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

Heng Lin asked on 08 Apr 2015, 07:21 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

Set content between Sticky Header and Footer

1 Answer, 1 is accepted