Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
39
rated 0 times [  45] [ 6]  / answers: 1 / hits: 27788  / 11 Years ago, wed, november 6, 2013, 12:00:00

When trying to submit a form with missing required fields, my browser (Chrome), displays a message mentionning there is a field missing, and if it's out of my screen, it scrolls up to it.



My problem is that I have a 50px fixed header in my webpage, and as a result, the input field is hidden, and the message seems to come out of nowhere:





Instead of



Input



Is there a way around this?



I tried both applying the 50px margin to <html> and to <body>



Cheers






EDIT



Here's a fiddle of the problem: http://jsfiddle.net/LL5S6/1/


More From » css

 Answers
16

In modern browsers there is a new CSS property for that use case:



html {
scroll-padding-top: 50px;
}


Your JSFiddle updated: http://jsfiddle.net/5o10ydbk/



Browser Support for scroll-padding: https://caniuse.com/#search=scroll-padding


[#74470] Tuesday, November 5, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
irvingcarloe

Total Points: 677
Total Questions: 109
Total Answers: 96

Location: Svalbard and Jan Mayen
Member since Sun, Sep 25, 2022
2 Years ago
irvingcarloe questions
Wed, Mar 31, 21, 00:00, 3 Years ago
Tue, Aug 4, 20, 00:00, 4 Years ago
Fri, Jul 3, 20, 00:00, 4 Years ago
;