Results 1 to 6 of 6

Thread: Better way to align controls?

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Better way to align controls?

    Hi,

    I have a selection of labels going down the screen with textboxes next to them. I have having to margin-left my textboxes so they line up because the labels are different lengths. This is very time consuming and I was just wondering if there was a better way.

    Many Thanks,

    Jiggy

  2. #2

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: Better way to align controls?

    Quote Originally Posted by Jigabyte View Post
    Hi,

    I have a selection of labels going down the screen with textboxes next to them. I have having to margin-left my textboxes so they line up because the labels are different lengths. This is very time consuming and I was just wondering if there was a better way.

    Many Thanks,

    Jiggy
    I guess from the lack of response I am doing it correctly which is not a bad thing as I've been doing this way for the last 6 months.

  3. #3
    ASP.NET Moderator gep13's Avatar
    Join Date
    Nov 2004
    Location
    The Granite City
    Posts
    21,963

    Re: Better way to align controls?

    Hey,

    Can you show a snippet of the code/html that you are currently using?

    Gary

  4. #4

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: Better way to align controls?

    Hi Gep13 long time since we last spoke (typed),

    Here is part of my CSS:-

    Code:
    .lblDescription
    {
    	margin-left: 5px;
    	margin-top: 5px;	
    }
    
    .txtDescription
    {
    	margin-left: 63px;
    	width: 350px;
    	margin-top: 5px;	
    }
    
    .lblCleanPeriod
    {
    	margin-left: 5px;
    	margin-top: 5px;	
    }
    
    .cboCleanPeriod
    {
    	margin-left: 32px;
    	width: 150px;
    	margin-top: 5px;
    }
    
    .lblProductTemp
    {
    	margin-left: 5px;
    	margin-top: 5px;
    }
    
    .cboProductTemp
    {
    	margin-left: 25px;
    	width: 250px;
    	margin-top: 5px;	
    }
    
    .lblBankGroup
    {
    	margin-left:5px;
    	margin-top: 5px;
    }
    
    .cboBankGroup
    {
    	margin-left:32px;
    	margin-top:5px;
    	width:250px;
    }
    
    .lblKeywords
    {
    	margin-left: 10px;
    }
    
    .txtKeywords
    {
    	margin-left: 20px;
    	width: 500px;
    }
    
    .butSearch
    {
    	margin-left:10px;
    	width: 70px;
    }
    
    .lblCICBankTemp
    {
    	margin-left: 5px;
    	margin-top: 5px;	
    }
    
    .cboCICBankTemp
    {
    	margin-left: 12px;
    	width: 250px;
    	margin-top: 5px;	
    }
    
    .butMethodPreview
    {
    	margin-left:10px;
    	width:70px;
    }
    And here is my html:-

    Code:
    <asp:Label ID="lblDescription" runat="server" CssClass="lblDescription" Text="Description"></asp:Label>
                        <asp:TextBox ID="txtDescription" runat="server" CssClass="txtDescription"></asp:TextBox>
                        <br />
                        <asp:Label ID="lblCleanPeriod1" runat="server" CssClass="lblCleanPeriod" Text="Cleaning Period 1"></asp:Label>
                        <asp:DropDownList ID="cboCleanPeriod1" runat="server" CssClass="cboCleanPeriod">
                        </asp:DropDownList>
                        <br />
                        <asp:Label ID="lblCleanPeriod2" runat="server" CssClass="lblCleanPeriod" Text="Cleaning Period 2"></asp:Label>
                        <asp:DropDownList ID="cboCleanPeriod2" runat="server" CssClass="cboCleanPeriod">
                        </asp:DropDownList>
                        <br />
                        <asp:Label ID="lblCleanPeriod3" runat="server" CssClass="lblCleanPeriod" Text="Cleaning Period 3"></asp:Label>
                        <asp:DropDownList ID="cboCleanPeriod3" runat="server" CssClass="cboCleanPeriod">
                        </asp:DropDownList>
                        <br />
                        <asp:Label ID="lblCleanPeriod4" runat="server" CssClass="lblCleanPeriod" Text="Cleaning Period 4"></asp:Label>
                        <asp:DropDownList ID="cboCleanPeriod4" runat="server" CssClass="cboCleanPeriod">
                        </asp:DropDownList>
                        <br />
                        <asp:Label ID="lblProductTemp" runat="server" CssClass="lblProductTemp" Text="Product Templates"></asp:Label>
                        <asp:DropDownList ID="cboProductTemp" runat="server" CssClass="cboProductTemp">
                        </asp:DropDownList>
                        <br />
                        <asp:Label ID="lblBankGroup" runat="server" CssClass="lblBankGroup" Text="CIC Library Group"></asp:Label>
                        <asp:DropDownList ID="cboBankGroup" runat="server" CssClass="cboBankGroup" AutoPostBack="true">                    
                        </asp:DropDownList>
                        <asp:Label ID="lblKeywords" runat="server" CssClass="lblKeywords" Text="Keywords"></asp:Label>
                        <asp:TextBox ID="txtKeywords" runat="server" CssClass="txtKeywords"></asp:TextBox>
                        <asp:Button ID="butSearch" runat="server" CssClass="butSearch" Text="Search" />
                        <br />
                        <asp:Label ID="lblCICBankTemp" runat="server" CssClass="lblCICBankTemp" Text="CIC Library Templates"></asp:Label>
                        <asp:DropDownList ID="cboCICBankTemp" runat="server" CssClass="cboCICBankTemp">
                        </asp:DropDownList>
    The way I am doing it for each control next to a label is set the left margin but this is very time consuming because I've to guess what it is then run it to see how far out it is. Also I recently added a componentone gridview with a specific theme which then knocked all my alignment out.

    Is this the correct way?

    Many thanks for getting back to me,

    Jiggy

  5. #5
    Frenzied Member brin351's Avatar
    Join Date
    Mar 2007
    Location
    Land Down Under
    Posts
    1,293

    Re: Better way to align controls?

    Hello,

    Here is the way I tend to layout forms, it's a simple login form but you should be able to drop your controlls in there no prob. The allignment is set by label width which will wrap text if it's longer also I'm using a fieldset tag as a container but you could change it to a div if preferred. Lastly because your using asp:labels give them a cssClass of say ="formLabel" and change the css element "fieldset label{..." to "fieldset .formLabel{..." in the code below.

    Hope that helps

    Code:
    fieldset
    {
        margin: 5px;
        border: 1px solid #ccc;
    }
    
    fieldset p 
    {
        margin: 2px 12px 10px 10px;
    }
    
    fieldset label
    {
        width:100px;
        display: block;
        float:left;
    }
    
    legend 
    {
        font-size: 120%;
        font-weight: bold;
        margin-left:5px;
        padding: 2px 4px 8px 4px;
    }
    
    .input 
    {
        border: 1px solid #ccc;
    }
    
    
    .validate { color:Red; font-weight:bold; border:1px solid gray;}
    Code:
    <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <asp:TextBox ID="TextBox1" runat="server" CssClass="input"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName"
                CssClass="validate" ErrorMessage="User Name is required." ToolTip="User Name is required."></asp:RequiredFieldValidator>
        </p>
        <p>
            <label>Password:</label>
            <asp:TextBox ID="TextBox2" runat="server" CssClass="input" TextMode="Password"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Password"
                CssClass="validate" ErrorMessage="Password is required." ToolTip="Password is required."></asp:RequiredFieldValidator>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" CommandName="Login" Text="Log In" />
        </p>
    </fieldset>
    The problem with computers is their nature is pure logic. Just once I'd like my computer to do something deluded.

  6. #6
    Frenzied Member IanRyder's Avatar
    Join Date
    Jan 2013
    Location
    Healing, UK
    Posts
    1,232

    Re: Better way to align controls?

    Hi,

    In addition to brin351's comments, another idea for you is to just insert a Table and set the width of the first Column in the table. Here is some sample HTML to demonstrate:-

    HTML Code:
        <style type="text/css">
            .style1
            {
                width: 98px;
            }
            .Style2
            {
                width: 100%;
            }
        </style>
    HTML Code:
        <table class="Style2">
            <tr>
                <td class="style1">
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label7" runat="server" Text="Label"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
    Hope that helps.

    Cheers,

    Ian

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width