Dynamically added form elements lose their margins

Posted on 08 September 2008 (11:17 AM)

I stumbled upon an annoying bug today. When dynamically appending input fields to the DOM, their margins are not as you specified in their respective classes.

See this page for an example. The input fields with class "text" have a right margin of 50px.

When a similar input field is appended to the DOM, however, the style is not copied.

A cloneNode operation is successful, luckily.

I encountered this bug in both Safari and Firefox. Unfortunately, I haven't had time to check in other browsers.

If you have a solution to this bug, or know more about it, please share it in the comments!

Back to top

Filed under HTML and CSS, Javascript

Comments:

  1. 17 September 2008 (02:27 PM) by Webby

    createElement is a proper function that creates the node correct. You mistakingly added a textNode before your second input by formatting your HTML readable. cloneNode also clones that textNode, being a nice function for you. Either don't format your HTML, remove all empty textNodes onload or create the textNode yourself :)

    this comment has been quoted by Harmen Janssen

  2. 17 September 2008 (03:18 PM) by Harmen Janssen

    Webby wrote:

    createElement is a proper function that creates the node correct. You mistakingly added a textNode before your second input by formatting your html readable. cloneNode also clones that textNode, being a nice function for you. Either don't format your html, remove all empty textNodes onload or create the textNode yourself :)

    You're absolutely right, I should've seen that.

    Thanks for rubbing my face in that obvious solution :)

Leave a comment

RE: Dynamically added form elements lose their margins

Note to spammers: rel="nofollow" will be added to links. If I consider your comment spam, your IP-address might get blocked.

HTML not allowed. URLS will be auto-linked. Maximum length is 1250 characters.

I understand this is inconvenient, but the spam I'm receiving on this website is driving me nuts. Please forgive me and cope with it until I find a better solution.

Mandatory fields are marked by an asterisk (*).

Increase textarea-size Decrease textarea-size

Back to top

Preferences

These settings will be saved for your convenience.