This blog is moved to
http://amalhashim.wordpress.com

Tuesday, March 9, 2010

ASP.Net Password Input Width Issue

I came across a strange issue with Password input and IE browser. I have set the width property as same as that of the other controls. But while rendering it in IE, the width of Password field was coming as around 10 pixel less than the other control. The best way to get rid of this issue was using CSS.

Before applying CSS I was using the below code

<html xmlns="http://www.w3.org/1999/xhtml" >
<
body>
<
form id="form1" runat="server">
<
table width="25%">
<
tr>
<
td style="width:100%; text-align:left">UserName: </td>
<
td style="width:100%; text-align:left"><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox></td>
</
tr>
<
tr>
<
td style="width:100%; text-align:left">Password: </td>
<
td style="width:100%; text-align:left"><asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox></td>
</
tr>
</
table>
</
form>
</
body>
</
html>
And in IE it’s coming as

image

Resolution, I have defined the following style
<style type="text/css" >
.TextBox
{
font-family: Arial, Tahoma, Verdana, Calibri;
font-size: 12px;
color: Black;
height: auto;
width: auto;
}
</style>

And modified the HTML as

<html xmlns="http://www.w3.org/1999/xhtml" >
<
body>
<
form id="form1" runat="server">
<
table width="25%">
<
tr>
<
td style="width:100%; text-align:left">UserName: </td>
<
td style="width:100%; text-align:left"><asp:TextBox CssClass="TextBox" ID="txtUserName" runat="server"></asp:TextBox></td>
</
tr>
<
tr>
<
td style="width:100%; text-align:left">Password: </td>
<
td style="width:100%; text-align:left"><asp:TextBox CssClass="TextBox" ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox></td>
</
tr>
</
table>
</
form>
</
body>
</
html>

Now in IE it’s coming as

image

Viola!!!!! issue resolved. Hope this helps.

1 comment:

Shri said...

Thanks Amal, this helped.