html - Tricky javascript/jquery/YUI issue for controlling white space between <input> elements -


this 1 bit complicated, , describe initial problem in detail , @ moment in solving it.

the problem:

my cms outputs of html inputs follows:

<input type="text"><input type="submit"> 

now because these input elements not each on own lines, there lack of white space between button , textfield so:

problem - no space

the preferred way, , majority of html generated in fact this, have html on seperate lines:

<input type="text"/> <input type="submit"/> 

so render this:

should this

now, cannot alter html (generated cms), , cannot play around margins , negative margins affect inputs.

i have found jquery solution seems work , fixes problem:

$('input').after(" "); 

it gives consistent white space between input elements if written in correct way. but, cannot use jquery in solution. not work jquery library. can use pure javascript, or yui3.

now, on stackoverflow has helped me convert above jquery following yui3 code:

y.all('input').insert('&nbsp','after'); 

and work in adds white space there none. but, problem piece of code adds whitespace correct pieces of html has whitespace.

now question is:

is there way

(1) change

y.all('input').insert('&nbsp','after'); 

so functions same way as

$('input').after(" "); 

or, alternatively (2) there perhaps pure javascript solution jquery solution do,

or perhaps (3) there way can first remove whitespace between elements, , add single white space yui method above?

thanks, , apologies vague question title! :)

edit: little info.

here problem in action: http://jsfiddle.net/c3shf/3/

here can see how jquery code fixes problem , makes consistent white space: http://jsfiddle.net/c3shf/2/

and here yui3 solution doesnt work desired: http://jsfiddle.net/9etrp/1/

css should proper way of formatting things.

input[type="submit"]{     margin-left: 0.5em; } 

or

input[type="text"]+input[type="submit"]{     margin-left: 1em; } 

http://jsfiddle.net/5eg4y/


you can create text-node , insertbefore submit using plain javascript dom

var submit = document.queryselector('input[type="submit"]'); var foo = document.createtextnode("foo");  submit.parentelement.insertbefore(foo, submit); 

http://jsfiddle.net/5eg4y/1/


Comments

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

javascript - storing input from prompt in array and displaying the array -