Forums
View unanswered posts | View active topics It is currently Fri Oct 31, 2014 6:12 am



Reply to topic  [ 6 posts ] 
 Incorrect positioning of elements on validation errors. 
Author Message

Joined: Thu May 10, 2012 5:07 am
Posts: 4
Post Incorrect positioning of elements on validation errors.
Hello.

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.

Any ideas ?


Thu May 10, 2012 5:16 am
Profile

Joined: Thu May 10, 2012 5:07 am
Posts: 4
Post Re: Incorrect positioning of elements on validation errors.
I found out that it works if I manually do:

window['PIE'].Element.getInstance(document.getElementById("submitButton")).update(true);

Any way to get all the elements for which PIE is applied ?


Thu May 10, 2012 6:09 am
Profile

Joined: Thu May 10, 2012 5:07 am
Posts: 4
Post Re: Incorrect positioning of elements on validation errors.
I found a fix for this issue.

I changed the fire function in PIE.Observable.prototype to

fire: function() {
var o = this.observers,
i = o.length;


while( i-- ) {
o[ i ] && o[ i ](1);
}
}

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
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post 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
Profile

Joined: Thu May 10, 2012 5:07 am
Posts: 4
Post 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
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post 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.


Thu May 10, 2012 11:54 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: Google [Bot] and 3 guests


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

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.