On my website, I have a fixed header and a form with required input and textarea fields. If the form is submitted without these fields filled, I want the user to be scrolled to the top-most unfilled required field. The sticky navbar complicates this process - I managed to solve it for input tags by using the scroll-margin-top CSS property with a value equal to the navbar's height. However, this solution does not work for textarea tags.
header {
position: fixed;
width: 100%;
height: 50px;
background-color: yellow;
top: 0;
}
input { /* WORKS */
scroll-margin-top: 50px;
}
textarea { /* DOES NOT WORK */
scroll-margin-top: 50px;
}
You can see the issue demonstrated in this fiddle: https://jsfiddle.net/3t42yqgj/ (please view it in Chrome or a similar browser).
One potential solution is to set the scroll-padding-top CSS property on the html tag, with a value matching the navbar's height (using padding instead of margin). However, this causes problems elsewhere on my site - ideally, I would like this applied only to specific pages' forms. Unfortunately, this property does not work on other tags like form or div.
html { /* WORKS */
scroll-padding-top: 50px;
}
form { /* DOES NOT WORK */
scroll-padding-top: 50px;
}
div { /* DOES NOT WORK */
scroll-padding-top: 50px;
}
If anyone has a solution to this dilemma, please help!