I am building a web form in Asp.net (I am Not using MVC)
I need to set up my web form so that the Text boxes and label controls are spaced at a particular width, and everything lines up vertically and horizontally per the requirements.
In the past I have used an html table in a web form to place the controls. And then using the designer, I can move the column lines of the html table so that the alignment is good. Basically I can use table rows <tr></tr> along with table cells <td></td>
to create my table, and to place the controls into.
That approach is a real inconvenience though, because often times adjusting the column width of a cell in the designer, can really end up disfiguring the entire html table.
So can someone recommend the best way to approach a problem like this? The only thing I can think of is to use CSS. I have used CSS for different types of styling, however not for aligning controls in a form. Possibly someone can help me out. Below is a
visual idea of what I am after. And following that is a sample html table with Asp.net controls, which illustrates what I am talking about.
First Name _____________________ MI ____ Last Name _________________________
City _____________________ State_______________________________
Email _____________________ Phone_____________________________
Adress ____________________________________________________________________
AppDevForMe
Participant
1396 Points
1327 Posts
Need CSS help to size html table and controls
Sep 20, 2012 04:06 AM|LINK
I am building a web form in Asp.net (I am Not using MVC)
I need to set up my web form so that the Text boxes and label controls are spaced at a particular width, and everything lines up vertically and horizontally per the requirements.
In the past I have used an html table in a web form to place the controls. And then using the designer, I can move the column lines of the html table so that the alignment is good. Basically I can use table rows <tr></tr> along with table cells <td></td> to create my table, and to place the controls into.
That approach is a real inconvenience though, because often times adjusting the column width of a cell in the designer, can really end up disfiguring the entire html table.
So can someone recommend the best way to approach a problem like this? The only thing I can think of is to use CSS. I have used CSS for different types of styling, however not for aligning controls in a form. Possibly someone can help me out. Below is a visual idea of what I am after. And following that is a sample html table with Asp.net controls, which illustrates what I am talking about.
First Name _____________________ MI ____ Last Name _________________________
City _____________________ State_______________________________
Email _____________________ Phone_____________________________
Adress ____________________________________________________________________
<Table>
<tr>
<td class="style3">
<asp:Label ID="fName" runat="server" Width = "113px" Text="First Name"></asp:Label>
</td>
<td class="style4">
<asp:TextBox ID="fNameBox" runat="server" style="margin-left: 0px"></asp:TextBox>
</td>
<td class="style4">
<asp:Label ID="lblMiddle" runat="server" Width = "7px" Text="Middle"></asp:Label>
</td>
<td class="style4">
<asp:TextBox ID="tboxMiddle" runat="server" Width="26px"></asp:TextBox>
</td>
<td class="style5">
<asp:Label ID="lblLast" runat="server" Width = "67px" Text="Last Name"></asp:Label>
</td> <td class="style4"> <asp:TextBox ID="tboxLast" runat="server"></asp:TextBox> </td>
</tr> <tr> <td class="style2"> <asp:Label ID="Label1" runat="server" Text="City"></asp:Label> </td>
<td> <asp:TextBox ID="cityTextBox" runat="server" style="margin-left: 0px"></asp:TextBox> </td>
<td></td>
<td></td>
<td class="style1">
<asp:Label ID="lblStateName" runat="server" Text="State"></asp:Label>
</td> <td> <asp:TextBox ID="tboxState" runat="server"></asp:TextBox> </td>
</tr> </Table>
ashoksudani
Participant
1043 Points
213 Posts
Re: Need CSS help to size html table and controls
Sep 20, 2012 05:03 AM|LINK
as Per your Requirment you need to create three type of Css
1. sixcolumn =>if your row has 6 column then you can apply this css
In this you need to one for lable and one for data
.sixcolumnlable
{
}
.sixcolumndata
{
}
2. fourcolumn=> same above
3. twocolumn => same above
AppDevForMe
Participant
1396 Points
1327 Posts
Re: Need CSS help to size html table and controls
Sep 20, 2012 12:46 PM|LINK
I need more information actually. Like what might be in the class declarations for .sixcolumntable