Parsley.js icon indicating copy to clipboard operation
Parsley.js copied to clipboard

After Submit -> Scroll Offset if error in a field

Open chequille opened this issue 6 years ago • 6 comments

Hi, my page does have a fixed header. Therefore, when there is a wrong entry in a field of the form or a mandatory field not filled, page scrolls to the first field with an error. Unfortunately, this field is covered by my fixed header and therefore not visible. Is there a way to change this with some kind of offset to this scroll function?

Please let me know if you have any idea. BR Jürgen

chequille avatar Jun 08 '19 07:06 chequille

This seems like a very valid use case for an additional feature/setting.

marcandre avatar Jun 14 '19 14:06 marcandre

Hi Marc, this would really be nice. I am wondering why there is not more feedback on this. I cannot image that I am the only one facing this problem !?!?!?

In the menatime, I solved this problem with the following additional line in parsley.js It is around line 1293. It is a solution which worked for me.

	_this6.focus();
	 $('html, body').animate({
	        scrollTop: $("#"+_this6.focus()[0]['id']).offset().top - 300
          }, 2000);

Would be great if there is something from your site, as this is maybe not good coded stuff.

Regard, Jürgen

chequille avatar Jun 16 '19 10:06 chequille

Hello, we're having the same problem.

We are using a fixed header on our site. When an input field ist behind the fixed header, parsley does not recognize that this element is not visible for the user and therefore focus it just behind the header. But if this input field is outside the window view then parsley focus the input field centered in the viewport.

I am not quite sure how parsley determines if an input field is outside the viewport. But a possible solution might be a custom viewport element for the determination instead of the default window viewport.

Let me know what you think.

Kind Regards, Sven

svenjungnickel avatar Jul 18 '19 12:07 svenjungnickel

Hi, the solution of @chequille works fine. It would be great to set an offset for the fixed header via config.

Regards, TJ

derBoogie avatar Oct 02 '20 08:10 derBoogie

Is there an update for this?

4ndre4s avatar Dec 08 '20 10:12 4ndre4s

@4ndre4s No PR so far

marcandre avatar Dec 08 '20 21:12 marcandre