offset window scoll location on errors

[mcbmcb0]

Hello. on submit when there's an error, the window location scrolls to show that field. but when i have a bootstrap fixed nav-menu then the menu obscures the field with the error. is there a way to set an offset for the scroll location (eg +100px lower)?

i think on v1.8.1 (which I'm using) its line 679: elem.focus(); a solution would be adding this line below that line with a variable for the offset (i'm not sure how browser compatible this is): window.scrollTo(window.scrollX, window.scrollY - 100);// scroll above el in focus

thanks Mike

[Robyer]

Focusing the element (on master branch) is done here: https://github.com/Robyer/nette-live-form-validation/blob/master/live-form-validation.js#L705 So yes, you found same line in v1.8.1.

But I don't know how is this usually solved. Browser itself handles scrolling to that element, so you need to either override the browser's default behavior somehow (if that's possible) or scroll manually your +100px lower after the above mentioned line.

Is your scrollTo method working? Also, I think you should scoll only when the item isn't visible on the page already - so maybe remember scroll position, then call focus, then get new scroll position, and if it changed, then scroll down additional 100px?

I don't have time for this, so you let me know when you find reliable solution for this problem. Thanks.

[mcbmcb0]

scrollto works fine for me (on FF), tho I'm not sure how cross browser compatible it is. good point about if the element is already in view - i'll look into it when i get some time

[mcbmcb0]

this works:

elem.focus(); //existing
if(elem.getBoundingClientRect().top < 100){
    window.scrollBy (0, elem.getBoundingClientRect().top - 100);
}

reportedly ie8 and above. i just need to figure out how to pass a default offset value from Liveform optons:[ ]

[mcbmcb0]

well that's easy:

var LiveForm = {
    options: { //existing 
        // vetical screen offset in px for element with error that receives focus after validation. Used when fixed navbar menu which may otherwise obscure the element in focus
        focusScreenOffset: 100, 
...

elem.focus(); //existing 
if(elem.getBoundingClientRect().top < LiveForm.options.focusScreenOffset){/
    window.scrollBy (0, elem.getBoundingClientRect().top - LiveForm.options.focusScreenOffset);
}

what do you think?

[Robyer]

Slighly changed and commited, thanks ;-)