[CLOSED] Text Alignment issue

  1. #1

    [CLOSED] Text Alignment issue

    Hi,

    In a web page I want to show some text in center. I am trying to implement that using 'div' tags but not working properly. Is there any best way to show text align at center always based on window re-size. Please check the code and I need the text should display as in attachment.

    <%@ Page Language="VB" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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" style="height: 100%">
    <head id="Head1" runat="server">
        <title>Untitled</title>
        <script runat="server">
        </script>
    </head>
    <body style="height: 100%; background-color: #d9d9d9;">
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="vpLogin" runat="server" Layout="Center">
            <Items>
                <ext:Panel ID="pnlHeader" runat="server" Height="25" Title="" BodyStyle="background-color:#d9d9d9;"
                    Html="<div id='header' style='float:middle;margin-top:5%;margin-left:32%;'><font style='font-family: Tahoma; font-size: 42px; color: #A8A8A8'>My Company Name</font></div><div id='header2' style='float:middle;margin-top:5%;margin-left:32%;'><font style='font-family: Tahoma; font-size: 24px; color: #A8A8A8'>Sub text goes here...</font></div>">
                    <CustomConfig>
                        <ext:ConfigItem Name="width" Value="100%" Mode="Value" />
                    </CustomConfig>
                    <Items>                    
                    </Items>
                </ext:Panel>
                <ext:BoxComponent ID="bxComp1" Height="200" runat="server">
                </ext:BoxComponent>
                <ext:Label ID="lblMessage" runat="server" Text="Upload Your Loan Documents Here"
                    AnchorHorizontal="100%" Height="20">
                </ext:Label>
                <ext:Window ID="Window1" runat="server" Closable="false" Resizable="false" Height="170"
                    Icon="Lock" Title="Login" Draggable="false" Width="350" Modal="false" Padding="5"
                    Layout="Form" ButtonAlign="Center">
                    <Items>
                        <ext:TextField ID="txtUsername" runat="server" ReadOnly="false" FieldLabel="Username"
                            AllowBlank="false" BlankText="Your username is required." Text="" LabelWidth="120" />    
                            <ext:TextField ID="txtPassword" runat="server" ReadOnly="false" InputType="Password"
                            FieldLabel="Password" AllowBlank="false" BlankText="Your password is required."
                            Text="" LabelWidth="120" />
                        <ext:LinkButton ID="lnkForgotPassword" runat="server" Text="Forgot Password" AnchorPoint="Right"
                      eldLabel="">
                        </ext:LinkButton>
                        <ext:Checkbox ID="chkRemember" runat="server" BoxLabel="Remember Me">
                        </ext:Checkbox>
                    </Items>
                    <Buttons>
                        <ext:Button ID="btnLogin" runat="server" Text="Login" Icon="Accept">
                            <Listeners>
                                <Click Handler="
                                if (!#{txtUsername}.validate() || !#{txtPassword}.validate()) {
                                    Ext.Msg.alert('Error','The Username and Password fields are both required');
                                    // return false to prevent the btnLogin_Click Ajax Click event from firing.
                                    return false; 
                                }" />
                            </Listeners>
                        </ext:Button>
                    </Buttons>
                </ext:Window>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Click image for larger version. 

Name:	TextAlign.PNG 
Views:	122 
Size:	21.2 KB 
ID:	3330
    Last edited by Daniil; Oct 20, 2011 at 6:36 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please look at the example.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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>Ext.Net Example</title>
    
        <style type="text/css">
            .center {
                text-align: center;
            }
            
            .label1 {
                font-size: 50px;
            }
            
            .label2 {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Window ID="Window1" runat="server" />
            <ext:Viewport runat="server" Layout="VBoxLayout">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:Container 
                        runat="server" 
                        Flex="1" 
                        Height="250" 
                        Layout="HBoxLayout">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:BoxComponent runat="server" Flex="1" />
                            <ext:Container 
                                runat="server"
                                Width="350">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Pack="Center" Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:DisplayField 
                                        runat="server" 
                                        Text="Company name" 
                                        Cls="label1 center" />
                                    <ext:DisplayField 
                                        runat="server" 
                                        Text="Sub text" 
                                        Cls="label2 center" />
                                </Items>
                            </ext:Container>
                            <ext:BoxComponent runat="server" Flex="1" />
                        </Items>
                    </ext:Container>
                </Items>
                <Listeners>
                    <Resize Handler="if (Window1) { 
                                         Window1.center();
                                     }" />
                </Listeners>
            </ext:Viewport>
            
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 6
    Last Post: Jul 11, 2012, 8:00 AM
  2. [CLOSED] Command Column alignment + header text not working
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 10, 2012, 8:57 AM
  3. [CLOSED] Is it possible Icon and Text alignment on Button?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 10, 2011, 10:23 PM
  4. [CLOSED] Vertical text alignment for LinkButton is off
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 15, 2010, 7:32 PM
  5. [CLOSED] Label text vertical alignment
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 17, 2009, 12:04 PM

Tags for this Thread

Posting Permissions