placeholder span positioning vs dynamically generated content
yellowled opened this issue · comments
If there's dynamically inserted content before the labels containing placeholder spans (think: some kind of message inserted or moved in the DOM using JS), the positioning of the placeholder span is off.
Not sure how to trigger repositioning here. It's probably a very rare scenario anyway. :-)
Do you have an example?
Do you insert the element after the placeholder elements have been created or beforehand?
I use this in a blog template, but I already committed a fix, so any blog using it may already have updated to the fixed version.
In a traditional s9y template, a comment form has a select element to pick another comment to reply to, but you can also click the "answer to" link in any comment to set it, which usually is done by an ancient onclick handler, i.e. clicking any "answer to" link changes the value of the select.
Since a select doesn't really fit, the 2k11 template replaces it with a p element containing the value of the select element. However, this is .visuallyhidden until a user actually clicks "anwer to". So there's a hidden element before the form elements containing a polyfilled placeholder which becomes visible (i.e. changes it's height) after the polyfilled placeholders have been position, thus moving the polyfilled placeholders down and out of the associated form elements.
Sorry I can't explain it any batter – as I said, this probably is a very rare use case.
This blog still uses the old version (and probably won't update at least for some days). First, check out the contact form, then scroll back up to the comments and click "Antwort" on any of the comments.
It should jump back to the comment form, showing the reply-to text I mentioned earlier. Now do the same in any brower without native placeholder support. :)