Telerik Forums / UI for ASP.NET AJAX
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 139 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
Mitchell
Top achievements
Rank 2
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

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 06 Feb 2015, 11:50 AM
Hi Mitchell,

Are these the misaligned elements? http://screencast.com/t/w4jHcyxHH

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mitchell
Top achievements
Rank 2
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....
0
Hristo Valyavicharski
Telerik team
answered on 11 Feb 2015, 03:09 PM
Hi MItchel,

Try to add this css:

.CenterImg {
  display: block;
  margin: 0 auto;
}


Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
PageLayout
Asked by
Mitchell
Top achievements
Rank 2
Answers by
Hristo Valyavicharski
Telerik team
Mitchell
Top achievements
Rank 2
Share this question
or