Question

Currently I have a row of input elements with a select and another disabled one below.

http://jsfiddle.net/WRWvJ/

When the user clicks on the text another is added before it.

However, when the rows are added the spacing between the input elements is all messed up. Doesn’t seem like the default browser CSS is being applied to them when they are added.

Any ideas as to why the margins would be off like this between the and elements?

Answer 1

It is because of the white space in your markup you see it renders correctly. But when you add the elements dynamically using append method it does not add any white spacing but just the elements you pass to append.

In order to render it fine use css to control the layout of the elements. Or make use of containers instead of just appending the elements.

Working demo – http://jsfiddle.net/WRWvJ/7/