ASP.NET Textbox size differs when TextMode=Password

Question

Hi,

I have a login page that has several textboxes on the page, one of them has the mode set to "password". This page worked previously but we've recently noticed (since an IE7 update) that the textbox that is specified as a password textbox is not as wide as the other textboxes on the page. If I remove the TextMode="Password", the textbox resizes to match the others.

I've checked for oddities on the page when the page displays using the IE developer toolbar, but it all looks ok.

The textbox code is fairly basic:

    <tr>
  <td>
 Username
  </td>
  <td>
 <asp:TextBox ID="txtUsername" runat="server" TabIndex="2"></asp:TextBox>
  </td>
</tr>
<tr>
  <td>
 Password
  </td>
  <td>
 <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" TabIndex="3"></asp:TextBox>
  </td>
</tr>

I've found one other person asking about this on the web and they fixed it by applying a css to all the input controls on the page, but I haven't managed to get that to work either.

Answer 1

It may help if you provide a Width="" property to your textboxes. That should force them to match up in terms of width even those they have different text modes.

Answer 2

The best way to ensure that all of your controls will be of the same size is via style (either inline or in css).

Answer 3

If you specify a value (like 20) for the TextBox.Columns property (which maps to the <input size="" /> attribute) they'll match up. If you want to use CSS, you should try to avoid an inline style (which the TextBox.Width property creates).

Answer 4

You may try setting Width property of all the text boxes to be same. 150 would be a good value.

Answer 5

I think it is normal to have different widths for password-type and non-password-type textboxes when you specify the size as "columns", as the width of a textbox is calculated by multiplying the width of the largest character in the font (say, "m") by the requested number of columns.

When passworded, the largest character is always the bullet (all chars are bullets), so the width is different (when using a proportional font obviously). To solve this problem, specify a width in pixel and not columns, i.e.: style="width:250px;" (or use a non-proportional font).