?
Solved

well aligning input controls

Posted on 2011-04-26
5
Medium Priority
?
219 Views
Last Modified: 2012-05-11
Hello all,

This sounds like a basic question but I have been playing with for a while and not able to sort it. I have a submission form with few labels and corresponding text boxes. And I have not been able to align it.

Hiow can I well align it?

Follwoing is my small code snippet:

 <div id = "LabelContainer" style = "width:130px; float:left; height: 216px;">
       <asp:Label ID="LabelSiteName" runat="server" Text="Site name"></asp:Label><br />
       <asp:Label ID="LabelCampainName" runat="server" Text="Campaign Name:"></asp:Label><br />
       <asp:Label ID="LabelStartDate" runat="server" Text="Start Date::"></asp:Label><br />
       <asp:Label ID="LabelEndDate" runat="server" Text="End Date:"></asp:Label><br />
       <asp:Label ID="LabelRulesAudio" runat="server" Text="Audio Rules"></asp:Label><br />
       <asp:Label ID="LabelTextRules" runat="server" Text="Text Rules"></asp:Label><br />
       <asp:Label ID="LabelWebrules" runat="server" Text="Web Rules"></asp:Label><br />
       <asp:Label ID="LabelLockOutLimit" runat="server" Text="LockOut Limit"></asp:Label><br />
       <asp:Label ID="LabelLockOutBit" runat="server" Text="LockOut Bit"></asp:Label><br />
       <asp:Label ID="LabelSpinRules" runat="server" Text="Spin Rules"></asp:Label><br />
    </div>

    <div id = "InputController" style = "width:200px; float:left">

        <asp:DropDownList ID="DdlSiteName" runat="server" DataSourceID="DsSiteList"
            DataTextField="Desc_nvch" DataValueField="Site_ID_inc">
        </asp:DropDownList>
        <br />  
    <asp:TextBox ID="TextCampaignName" runat="server"></asp:TextBox>
    <br />  
    <asp:TextBox ID="TextStartDate" runat="server"></asp:TextBox>
    <br />    
    <asp:TextBox ID="TextEndDate" runat="server"></asp:TextBox>
    <br />      
    <asp:TextBox ID="TextRulesAudio" runat="server"></asp:TextBox>
    <br />    
    <asp:TextBox ID="TextTextRules" runat="server"></asp:TextBox>
    <br />      
    <asp:TextBox ID="TextWebRules" runat="server"></asp:TextBox>
    <br/>  
    <asp:TextBox ID="TextLockOutLimit" runat="server"></asp:TextBox>
    <br/>  
    <asp:TextBox ID="TextLockOutBit" runat="server"></asp:TextBox>
    <br/>  
    <asp:TextBox ID="TextSpinRules" runat="server"></asp:TextBox>
    <br/>
    </div>

As you can see lables are not particularly going well with the text boxes and looks  really bad/ You can actually suggest me completely different lay out since I am new to CSS there are high chances that I am missing some rich features which could easily fix this problem
0
Comment
Question by:TheCommunicator
  • 2
  • 2
5 Comments
 
LVL 9

Expert Comment

by:TonyReba
ID: 35469816
can you please a sample screenshot ?
0
 

Author Comment

by:TheCommunicator
ID: 35469919
As you can see here, with the same number of lables and textboxes....lables are not hand in had with the corresponding text box because they are not evenly distributed.
Alignment-issue.png
0
 
LVL 9

Accepted Solution

by:
TonyReba earned 1000 total points
ID: 35470121
The easiest way to go there would be a regular table layout with two columns

e.g.

<table cellpadding="0" cellspacing="0" style="border-right: #000000 thin solid; border-top: #000000  id="mytbl">
 <tr>
<td>
</td>
<td>
</td>
</tr>
</table>

0
 
LVL 12

Assisted Solution

by:Dean OBrien
Dean OBrien earned 1000 total points
ID: 35470767
or add something like this at the top:

<style>
#LabelContainer label {width:200px;height:50px;display:block}
#InputController TextBox {width:200px;height:50px;display:block}
#InputController DropDownList {width:200px;height:50px;display:block}
</style>

You would need to remove the height attribute from this line:
<div id = "LabelContainer" style = "width:130px; float:left; height: 216px;">

Easynow
0
 

Author Comment

by:TheCommunicator
ID: 35479611
Thank you so much . Both approach worked but I took up the one with rable though :).
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question