Focusing input filed is going below header

Question

I have a long form and i am trying to focus the invalid fields with focus. I have a fixed header, so focusing input field is going below the header. Anyway to fix it?

I am using angular 1.5.7, ng-bootstrap, slimscroll in site.

You can do focus manually, adding header hight to scroll. Well, I'm not sure, but you can also use ng-focus on elements and do manual scroll on header height in ng-focus function. — Kindzoku, Aug 17 '16 at 07:36

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

The best way is to create a directive which will handle this functionality. You can refer below stackoverflow link, which worked for me, illustrating how you can create the custom directive to set the focus.

How to set focus on input field?

edited May 23 '17 at 12:31

Community

1
1

answered Aug 17 '16 at 07:47

Aveg Patekar

71
3
8

score 0 · Answer 2 · answered Aug 17 '16 at 07:56

Here is plunker for my comment

https://plnkr.co/edit/Ajoi66vkzsbxoiokLD93?p=preview

<input ng-focus="tc.onFocus()" type="text" />

vm.onFocus = function(){
    var height = document.getElementsByTagName('header')[0].offsetHeight; 
    document.scrollHeight -= height;
}

Here is the main idea.

And btw, there is a good practice to add padding-top: fixed header height to container after header.

Focusing input filed is going below header

2 Answers2