Issue with nested page layouts with any other ui control

4 posts, 0 answers
  1. Mitchell
    Mitchell avatar
    3 posts
    Member since:
    May 2014

    Posted 03 Feb 2015 Link to this post

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


  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 06 Feb 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mitchell
    Mitchell avatar
    3 posts
    Member since:
    May 2014

    Posted 06 Feb 2015 in reply to Hristo Valyavicharski Link to this post

    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....
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 11 Feb 2015 Link to this post

    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.

     
Back to Top