Help with aligning controls vertically.

I have a user control (with three controls inside it) that appears multiple
times in the containing page. Sometimes I want to hide the rightmost
control in the UC but if I do that it screws up the horizontal alignment of
the other two controls. It appears that they are being stretched due to the
absence of the others and I'm not sure how to fix it.

If I dont hide anything it looks all lined up (each line is a web user
control):
Label DropDownList CheckBox
Label DropDownList CheckBox
Label DropDownList CheckBox

However, sometimes I want to hide the check box for a given line but it
messes up the alignment when I do that (notice the spacing on the second
line):
Label DropDownList CheckBox
Label DropDownList
Label DropDownList CheckBox

What I want is for the vertical alignment of each Label, and each DropDown
to be ok regardless of if the CheckBox shows (and I wan the check boxes
lined up too).
--------------------------------------------
Here is the HTML I use for the User Control:
<table width=375 border=0 cellpadding=0 cellspacing=0>
<tr width=100%>
<td width=35%>
<asp:Label ID="labelName" runat="server" Text="Label" Font-Bold="True"[color=blue]
></asp:Label>[/color]
</td>
<td width=50%>
<asp:DropDownList ID="ddlData" runat="server" />
</td>
<td width=15%>
<asp:CheckBox ID="chkSuppress" runat="server" Text="Suppress" />
</td>
</tr>
</table>

I tried making the first two columns its own table inside the first column
of the outer table but got the same effect. What I suspect is that since
the third column is hidden for a given row then the first two get stretched
some. If I set the table to show borders it definitely shows the first
two columns oversized.


Can anyone provide advice?

Thanks.

re: Help with aligning controls vertically.

Eric wrote:
[color=blue]
> --------------------------------------------
> Here is the HTML I use for the User Control:
> <table width=375 border=0 cellpadding=0 cellspacing=0>
> <tr width=100%>
> <td width=35%>
> <asp:Label ID="labelName" runat="server" Text="Label" Font-Bold="True"[color=green]
> ></asp:Label>[/color]
> </td>
> <td width=50%>
> <asp:DropDownList ID="ddlData" runat="server" />
> </td>
> <td width=15%>
> <asp:CheckBox ID="chkSuppress" runat="server" Text="Suppress" />
> </td>
> </tr>
> </table>
>
> I tried making the first two columns its own table inside the first column
> of the outer table but got the same effect. What I suspect is that since
> the third column is hidden for a given row then the first two get stretched
> some. If I set the table to show borders it definitely shows the first
> two columns oversized.
>
>
> Can anyone provide advice?
>
> Thanks.
>
>[/color]

I assume since you showed 1 table, that for your example output you have
<table> after <table> after <table> (3 tables). Why not have the
'repeating' effect happen by adding rows to the table (3 rows in 1
table), then the controls are in cells and can't move:

<table width=375 border=0 cellpadding=0 cellspacing=0>
<tr width=100%>
<td width=35%>
label
</td>
<td width=50%>
dropdownlist
</td>
<td width=15%>
checkbox
</td>
</tr>
<tr width=100%>
<td width=35%>
label
</td>
<td width=50%>
dropdownlist
</td>
<td width=15%>
checkbox
</td>
</tr>
<tr width=100%>
<td width=35%>
label
</td>
<td width=50%>
dropdownlist
</td>
<td width=15%>
checkbox
</td>
</tr>
</table>

--
Craig
Microsoft MVP - ASP/ASP.NET