• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 356
  • Last Modified:

HTML/ASP.NET table/textbox formatting

in the below ASP.NET code, the first table of textboxes formats correctly, i.e. side-by-side, but the second does not. What is the formatting difference between the two?

<tr>
                         <td align="left" class="generaltext" style="width: 479px; height: 58px" bgcolor="#ffefd5">
                             &nbsp;Study ID:<asp:TextBox ID="TBid" runat="server" onkeyup="return autoTab(this, 1, event);"   Style="left: 10px;
                                 position: relative; top: 0px" Width="18px" Height="14px" MaxLength="1" CssClass="watermark"></asp:TextBox>
                                 <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="TBid"> </asp:RequiredFieldValidator>
                             &nbsp; <span style="font-size: 16pt">- &nbsp;</span><asp:TextBox ID="TBID1" runat="server" onkeyup="return autoTab(this, 2, event);" Height="14px" MaxLength="2" Width="24px" CssClass="watermark"></asp:TextBox>
                             <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TBid1"> </asp:RequiredFieldValidator>
                             <span
                                     style="font-size: 16pt">-&nbsp; </span><asp:TextBox
                                 ID="TBid2" runat="server" onkeyup="return autoTab(this, 3, event);" Height="14px" MaxLength="3" Width="36px" CssClass="watermark"></asp:TextBox>
                                 <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TBid2"> </asp:RequiredFieldValidator>&nbsp;
                             <asp:Label ID="errorLabel1" runat="server" ForeColor="Red" Width="253px"></asp:Label></td>                                                      
                     </tr>
                     
                     <tr>
                         <td align="left" class="generaltext" style="width: 479px; height: 58px" bgcolor="#ffefd5">
                             &nbsp;Re-enter Study ID:<asp:TextBox ID="TextBox1" runat="server" onkeyup="return autoTab(this, 1, event);"   Style="left: 10px;
                                 position: relative; top: 0px" Width="18px" Height="14px" MaxLength="1" CssClass="watermark"></asp:TextBox>
                                  <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="TextBox1" ControlToCompare="Tbid" ErrorMessage="Value does not match above entry."> </asp:CompareValidator>
                             &nbsp; <span style="font-size: 16pt">- &nbsp;</span><asp:TextBox ID="TextBox2" runat="server" onkeyup="return autoTab(this, 2, event);" Height="14px" MaxLength="2" Width="24px" CssClass="watermark"></asp:TextBox>
                               <asp:CompareValidator ID="CompareValidator2" runat="server" ControlToValidate="TextBox2" ControlToCompare="Tbid1" ErrorMessage="Value does not match above entry."> </asp:CompareValidator>
                             <span
                                     style="font-size: 16pt">-&nbsp; </span><asp:TextBox
                                 ID="TextBox3" runat="server" onkeyup="return autoTab(this, 3, event);" Height="14px" MaxLength="3" Width="36px" CssClass="watermark"></asp:TextBox>&nbsp;
                                   <asp:CompareValidator ID="CompareValidator3" runat="server" ControlToValidate="TextBox3" ControlToCompare="Tbid2" ErrorMessage="Value does not match above entry."> </asp:CompareValidator>
                             <asp:Label ID="Label4" runat="server" ForeColor="Red" Width="253px"></asp:Label></td>
                           
                     </tr>
0
devabarry
Asked:
devabarry
  • 4
1 Solution
 
kgoheryCommented:
Hey

Your validators in the 1st td dont have any text, but the they do in the 2nd td. This is what is throwing out your formatting. If I were you i would not have the validators inline as you have them. Perhaps have your line of text fields and then another line below with your validators.

Hope this helps,

Karl
0
 
kgoheryCommented:
I think i see the problem actually. If the display property of your validators is set to Static they are rendered with style="visibility: hidden". This hides the validator but the space on the page that the validator occupies is preserved and looks like a big blank section on your page. However if you use display=Dynamic they are rendered as style="display: none". This does not preserve the space on the page so it will appear as if your validators dont exist and your fields will render correctly.

However, if the validators do display their error message the alignment will be thrown out again. As I said in the last post, I'd put them on a seperate line.

Cheers,

Karl
0
 
devabarryAuthor Commented:
Thanks Karl this is helpful. When you say place the validators in a separate line, do you mean in a separate table row? I tried this below the textbox row and oddly enough the error messages displayed on the top of the page. Ideally I think I should figure out how to concatenate the three texbox values for a single error message when the total string value doesn't match its counterpart above.
0
 
kgoheryCommented:
A simple <br /> should sort you out. Alternatively, if you're using ASP.NET 2.0 you could use the validation summary control. Basically, you just display an asterisk where there is an error and then all error messages are displayed in one place at the end of the form. I'd still stick with putting them on a new line though - add a <br /> after your form elements and then put your validators there.

If your message appeared at the top of the page when you added a new row it makes me think that you had some badly written html i.e. <tr> and <td> tags not nested correctly or something like that.

Does this solve your issue?
0
 
kgoheryCommented:
Glad I could help :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now