I have a form that has text fields with rounded corners and a submit button with a linear gradient background.I use jQuery validator for client side validation and I put the validation errors under the text field that contains the error.

My problem is that when the form is submitted with errors, the html submit button moves down but the VML element containing the linear gradient background stays in the same position.The same thing happens for the input field too.

I'm using IE8, I checked that -pie-poll is activated, position updates do occur as needed, but there seems to be an error in the calculations. I also tried manually firing the events to update the position. No luck.

Instead of o[ i ]() I added the parameter 1 to force the update (Line 384).Otherwise it wouldn't recalculate.

Please consider adding this fix in the next version of PIE, since the role of the Heartbeat timer is to keep things in sync for IE.

Thanks.

Thu May 10, 2012 7:06 am

jason

Joined: Wed Jul 14, 2010 11:46 amPosts: 1452

Re: Incorrect positioning of elements on validation errors.

Forcing an update like that is going to have some pretty serious performance consequences.

I'd much rather find the root cause of why it's not detecting the position change. Do you have a link you can share, or ideally a standalone testcase document that has the issue?

Often you can also work around positioning issues by wrapping the target element in a div or span with position:relative -- then PIE's element is always relative to that wrapper and if the wrapper moves so will everything else.

Thu May 10, 2012 8:45 am

balazsbela

Joined: Thu May 10, 2012 5:07 amPosts: 4

Re: Incorrect positioning of elements on validation errors.

I'm sorry but the page is work related so I can't send you a link, maybe I'll try to make a POC if I'll have the time.

We're using a jquery tools overlay with a form in it and onsubmit we validate the form with jquery validator and insert the validation messages directly under the field, hence the button moves down.I'm not sure why it can't detect the position change, maybe the reason is the TODO in the code on line 4132:

/* TODO just using getBoundingClientRect (used internally by BoundsInfo) for detecting position changes may not always be accurate; it's possible that an element will actually move relative to its positioning parent, but its position relative to the viewport will stay the same. Need to come up with a better way to track movement. The most accurate would be the same logic used in RootRenderer.updatePos() but that is a more expensive operation since it does some DOM walking, and we want this check to be as fast as possible. */

I know that wrapping in relative divs would work, but this is not an option since we get the designs and markup from a third party and reviewing all their rules is too time consuming.The input field is wrapped in a smaller div, which moves down the page, so maybe the position of the input field doesn't change relative to the wrapping div.I think this is exactly the situation described above.

I'm sorry I couldn't give more details now, I will try to make a poc and post it when I find the time.

Thanks.

Thu May 10, 2012 9:51 am

jason

Joined: Wed Jul 14, 2010 11:46 amPosts: 1452

Re: Incorrect positioning of elements on validation errors.

Quote:

maybe the position of the input field doesn't change relative to the wrapping div.I think this is exactly the situation described above.

No, the situation in that comment is when it does not move relative to the *browser viewport*. It does not sound like that is the case in your example.

Who is online

Users browsing this forum: Exabot [Bot] and 6 guests

You cannot post new topics in this forumYou cannot reply to topics in this forumYou cannot edit your posts in this forumYou cannot delete your posts in this forumYou cannot post attachments in this forum