I asked myself several times. Why are validators error messages not displayed in Google Chrome? It is weird. Not a single validation error message is displayed in the page as soon as the following CSS is added. It works well with IE, Safari and Mozilla-type browsers but fails on Google Chrome.
div.sink {padding:20px; width: 190px;border:1px silver solid;}
div.sink input[type="text"]{width: 190px;}
div.sink input[type="submit"]{width: 50px;}
I am sure that all the validators are fired and the page as a result reports invalid but there is no error message. There is no doubt that the problem is somehow related to the above CSS. To reduce the complexity of the page and easily to nail down the problem, I marked up a simple login page for investigation.
With a bit modification, the page looks like this - very simple, only text boxes, RequiredFieldValidators and a login button. There is no code behind (no OnClick event) and they are straightly marks up.
<head>
<style type="text/css">
div.login {padding:20px; width: 190px; border:1px silver solid;}
div.login input[type="text"], div.login input[type="password"]{ width: 190px; }
div.login input[type="submit"]{width: 50px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="login">
User Name:<br />
<asp:TextBox id="txtUsername" runat="server" MaxLength="30"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server"
ControlToValidate="txtUsername" Display="Dynamic"
ErrorMessage="A username is required."></asp:RequiredFieldValidator><br />
Password:<br />
<asp:TextBox id="txtPassword" runat="server" TextMode="Password" MaxLength="180" ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server"
ControlToValidate="txtPassword" Display="Dynamic"
ErrorMessage="A password is required."></asp:RequiredFieldValidator><br />
<asp:Button ID="btnLogin" runat="server" Text="Log In" /><br />
</div>
</form>
</body>
With the above markup, the error message is shown at least for the User Name, unlike my problem page. The funny is that in this simple example, only the last validator won't be able to display error message if I keep adding more the similar control and validator. For sure, everything works normal if the CSS is removed.
No error message for the only and one validator |
No error message for the last validator screen 1  |
| No error message for the last validator screen 2  |
No error message for the last validator screen 3  |
The CSS is not complex. As a matter of face, it is very simple. What it does is to set the width for the input box or button in the page. To resolve this, I can simply add the width back to the control inself by removing the CSS. However, I cannot do it with my original page. Most controls are from user controls which won't allow me to set width. In addition, If I manage to add the width to them, the changes will affect other pages across the entire project unless I do it programically instead of static. It means I have to go in every single user control to add some code so that it can accept width change. I don't think that I want to go this route.
After playing around for some time, I finally found out the problem. The problem is the width setting in the first line.
div.login {padding:20px; width: 190px; border:1px silver solid;}
div.login input[type="text"], div.login input[type="password"]{ width: 190px; }
div.login input[type="submit"]{width: 50px;}
Adding 4 more pixels fixes the problem!
div.login {padding:20px; width: 194px; border:1px silver solid;}
div.login input[type="text"], div.login input[type="password"]{ width: 190px; }
div.login input[type="submit"]{width: 50px;}
It appears to me that Google Chrome browser cares about the outer width of the DIV when a CSS is specified. Most browsers may ignore it if the outer DIV is not width enough for its child components. From this instance, I learn that I need to pay attention to declare my CSS in order to prevent this from happening.
