StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POChrome Email Input Field built-in validation warning visually offset
primarykey
Id
17237559
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-06-21T14:17:55.950
FavoriteCount
0
LastActivityDate
2016-10-18T12:35:34.053
LastEditDate
2013-06-21T14:53:27.860
LastEditorUserId
1352507
OwnerUserId
1352507
ParentId
0
PostTypeId
1
Score
3
ViewCount
2633
LastEditorDisplayName
text
Body
<p>I'm building a super-simple sign-up form for a mini app and thought it'd be fun to use the browser's built-in HTML5 validations if I could - so I made the text input for the form a <code>type="email"</code> for funsies. Load it up in Chrome (27.0.1453.116) and attempted to enter an invalid email ("lksjdf" or something, you know), and as expected an error message pops up when I attempt to submit. But the unexpected part was the validation message is offset from the text box by about 60 pixels (give or take a few)(note that the email field is active, but the error message appears to point to the password field):</p> <p><img src="https://i.stack.imgur.com/RJAIr.png" alt="screenshot of strange validation error"></p> <p>If I remove all styling and just leave the markup, the validation message position is improved, but about the amount of margin and padding that were on the form field:</p> <p><img src="https://i.stack.imgur.com/x9dy0.png" alt="second screenshot"></p> <p>When I repeat the process in Firefox, the validations show up correctly.</p> <p>As we're narrowing down the issue, it appears that having an <code><h1></code> tag just before the form tag causes the problem to appear - if I remove the <code><h1></code> tag then the validation message lines up correctly.</p> <p>Is this a bug in Chrome? Is there a way I can force Chrome's validation messages to line up with the input correctly? Why would another tag cause it to not line up?</p> <p>Here's the code so you can test/verify:</p> <pre><code><!DOCTYPE html> <html> <head> <title>Sample App | Sign Up</title>  </head> <body>  <h1>Sign Up</h1> <form accept-charset="UTF-8" action="" id="new_user" method="post"> <label for="user_name">Name</label> <input id="user_name" name="user[name]" size="30" type="text" /> <label for="user_email">Email</label>  <input id="user_email" name="user[email]" size="30" type="email" /> <label for="user_password">Password</label> <input id="user_password" name="user[password]" size="30" type="password" /> <label for="user_password_confirmation">Confirm Password</label> <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> <input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" /> </form> </body> </html> </code></pre>
Tags
<css><html5><google-chrome>
Title
Chrome Email Input Field built-in validation warning visually offset
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USguiniveretoo
UserOwnerUserId
1. USguiniveretoo
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POChrome Email Input Field built-in validation warning visually offset
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.