CODEWITHSUNDEEP
htmlcssscrolltextarearequired
plsssineedheeeelp
plsssineedheeeelp

Reputation: 351

Required textarea field is not appropriately scrolled to when using fixed header. CSS property scroll-margin/padding does not work

I have a fixed header on my website and a form. There are some input fields and some textarea fields that are required. When the form is submitted without those fields filled, I would like the user to be appropriately scrolled to the top-most required field that is not filled. The sticky navbar makes that tricky - I have figured out a solution for the input tags - using the CSS property scroll-margin-top with a value equal to that of the height of the navbar. Unfortunately, that DOES NOT work for the 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;
}

Here is a fiddle displaying the problem: https://jsfiddle.net/3t42yqgj/ (Make sure to open it with Chrome or another browser based on it).

One solution is to set the CSS property scroll-padding-top (note the use of padding instead of margin) of the html tag with a value equal to that of the height of the navbar. The problem with that is that it introduces issues with other parts of my website - I would like this to be applied only to the forms of a few particular pages. Unfortunately, the property DOES NOT work on any other tag (e.g 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;
}

Please, help me!

Upvotes: 0

Views: 38

Answers (1)

Shivakant Giri
Shivakant Giri

Reputation: 1

Try changing the the value of textarea in the CSS .Increase it because the distance of the textarea field is more than from the top.

Upvotes: 0

Related Questions