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

Issue with nested page layouts with any other ui control

3 Answers 213 Views

PageLayout

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

Mitchell asked on 03 Feb 2015, 11:52 AM

After searching around i didn't see the answer to my problem so i thought id post it here.

I'm working on a Master Page-Content page with nested page layouts. one on the master page, the other on the content page. What is happening is when i go do use the RadNotification or use the invalid setting on a text box. the page updates and all the content expands to the right by about 50% but the notification stays centered in the window.. is this a known issue or am I missing the obvious.

I am using product Version 2014.3.1209.40
Any help or idea with this would be appreciated.

code I am using below.

Master page

<%@ Master Language="VB" CodeFile="MobileRoot.master.vb" Inherits="M_Root" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %>

<!DOCTYPE html>

<html>

<head runat="server">

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />

<link href="css/RootMaster.css" rel="Stylesheet" type="text/css" />

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<rad:RadPageLayout ID="rplMaster" runat="server">

<Rows>

<rad:LayoutRow>

<Content>

<rad:RadNotification ID="rnNotify" runat="server">

</rad:RadNotification>

</Content>

</rad:LayoutRow>

</Rows>

<%--Row to hold header for site--%>

<Rows>

<rad:LayoutRow ID="lrHeader" runat="server" CssClass="header">

<Columns>

<rad:LayoutColumn HiddenXs="true" Span="4">

</rad:LayoutColumn>

<rad:LayoutColumn SpanXs="12" Span="4">

<center>

<asp:Image ID="imgHeader" runat="server" CssClass="CenterImg" Width="8.5em" Height="3.5em" />

</center>

</rad:LayoutColumn>

<rad:LayoutColumn HiddenXs="true" Span="4">

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

<%--Row to Hold Content--%>

<Rows>

<rad:LayoutRow runat="server" CssClass="contentcontainer">

<Columns>

<rad:LayoutColumn Span="12">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

<%-- Content page displays here --%>

</asp:ContentPlaceHolder>

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

<Rows>

<rad:LayoutRow runat="server" CssClass="footercontainer">

<Columns>

<rad:LayoutColumn Span="4">

</rad:LayoutColumn>

<rad:LayoutColumn Span="4">

</rad:LayoutColumn>

<rad:LayoutColumn Span="4">

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

</rad:RadPageLayout>

</form>

</body>

</html>

Content page

<%@ Page Title="" Language="VB" MasterPageFile="~/Mobile/MobileRoot.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="M_Login" %>

<%@ MasterType VirtualPath="~/Mobile/MobileRoot.master" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<rad:RadPageLayout ID="rplDashboard" runat="server">

<Rows>

<rad:LayoutRow runat="server" CssClass="loginsectionheader">

<Columns>

<rad:LayoutColumn SpanXs="2" Span="4">

</rad:LayoutColumn>

<rad:LayoutColumn SpanXs="8" Span="4">

<asp:Image ID="imgLoginHeader" runat="server" CssClass="CenterImg" Width="12.62em" Height="11em" />

</rad:LayoutColumn>

<rad:LayoutColumn SpanXs="2" Span="4">

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

<Rows>

<rad:LayoutRow CssClass="logininput">

<Columns>

<rad:LayoutColumn SpanXs="1" SpanSm="3" Span="4">

</rad:LayoutColumn>

<rad:CompositeLayoutColumn SpanXs="10" SpanSm="6" Span="4">

<Rows>

<rad:LayoutRow>

<Content>

<rad:RadTextBox ID="txtLogin" runat="server"></rad:RadTextBox>

</Content>

</rad:LayoutRow>

<rad:LayoutRow>

<Content>

<rad:RadTextBox ID="txtPass" runat="server" placeholder="Password"></rad:RadTextBox>

</Content>

</rad:LayoutRow>

</Rows>

</rad:CompositeLayoutColumn>

<rad:LayoutColumn SpanXs="1" SpanSm="3" Span="4">

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

<Rows>

<rad:LayoutRow runat="server" CssClass="">

<Columns>

<rad:LayoutColumn SpanXs="3" Span="4">

</rad:LayoutColumn>

<rad:CompositeLayoutColumn ID="clcLogPw" runat="server">

<Rows>

<rad:LayoutRow>

<Content>

<rad:RadButton ID="btnLogin" runat="server"></rad:RadButton>

</Content>

</rad:LayoutRow>

<rad:LayoutRow>

<Content>

<rad:RadButton ID="btnForgotPw" runat="server"></rad:RadButton>

</Content>

</rad:LayoutRow>

</Rows>

</rad:CompositeLayoutColumn>

<rad:LayoutColumn SpanXs="3" Span="4">

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

<Rows>

<rad:LayoutRow runat="server">

<Columns>

<rad:LayoutColumn HiddenXs="true" Span="1">

</rad:LayoutColumn>

<rad:CompositeLayoutColumn ID="lcCreateAcct" runat="server">

<Rows>

<rad:LayoutRow>

<Content>

<asp:Label ID="lblCreateAcctount" runat="server"></asp:Label></Content>

</rad:LayoutRow>

<rad:LayoutRow>

<Content>

<rad:RadButton ID="btnCreateAcct" runat="server"></rad:RadButton>

</Content>

</rad:LayoutRow>

</Rows>

</rad:CompositeLayoutColumn>

<rad:CompositeLayoutColumn ID="lcMakePayemt" runat="server">

<Rows>

<rad:LayoutRow>

<Content>

<asp:Label ID="lblMakePayment" runat="server"></asp:Label></Content>

</rad:LayoutRow>

<rad:LayoutRow>

<Content>

<rad:RadButton ID="btnMakePayment" runat="server"></rad:RadButton>

</Content>

</rad:LayoutRow>

</Rows>

</rad:CompositeLayoutColumn>

<rad:LayoutColumn HiddenXs="true" Span="1">

</rad:LayoutColumn>

</Columns>

</rad:LayoutRow>

</Rows>

</rad:RadPageLayout>

</asp:Content>

CSS

html {

font-size: 100%; /*using ems to set text size not px. this is required. default size is 1em.*/

}

body {

color: #FFFFFF;

background-color: #000000;

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

}

/*Header Start*/

.header {

background-color: #DDDDDD;

padding-top: 0.3em;

}

.pagetitlecontainer {

background-color: #ae862c;

}

.pagetitle {

font-size: 1.5em;

line-height: 1.5;

font-weight: bold;

}

.centerimg {

margin-left: auto;

margin-right: auto;

}

/*Content Start*/

.sectionheader {

line-height: 2;

}

.loginsectionheader {

margin-bottom: 1.75em;

}

.sectionlbllist {

line-height: 1.5;

}

.logininput {

line-height: 2;

}

.loginbutton {

line-height: 1.5;

}

.compositlayout {

margin-top:.75em;

text-align:center;

position:absolute;

}

.layoutrow {

line-height: 1.5;

}

.methodslist {

line-height: 1.5;

font-size: 1.5em;

background-color: #000000;

color: #FFFFFF;

border-style:hidden !important;

}

.RadListBox_Default .rlbGroup, .RadListBox_Default .rlbTemplateContainer {

border-style: hidden !important;

}

/*Footer Start*/

.footerleft {

}

.footermiddle {

}

.footerright {

}

3 Answers, 1 is accepted

answered on 06 Feb 2015, 03:34 PM

Actually what was causing it was when the notification or the text box being marked as "invalid" was called, it caused a post back. Being that I only defined the properties on page load (is not post back), the controls did not retain their properties. hence everything moving to the left.

moral of this post: when defining everything from code behind, be sure to account for the post back and don't just define things for when the page loads.

Now if i could only get the images to center with out having to rely on the <center></center> tags inside the page layout....