CODEWITHSUNDEEP
javascripthtmlcss
GeekedOut
GeekedOut

Reputation: 17185

How to put two buttons on the same horizontal alignment?

I am making an HTML form in JavaScript and it works, but the two buttons: cancel and submit are on seperate lines (one above the other). How can I make them horizontally aligned?

Here is the code that I have:

var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";

And by the way, it looks very messy :) How do people usually do this sort of thing so that it is cleaner?

Thanks!

Upvotes: 0

Views: 652

Answers (2)

Doug
Doug

Reputation: 3312

http://jsfiddle.net/G2qsp/1/

As far as I can tell, they are on the same line :P

The normal way of making it cleaner (at least, as I do it) is to just put it on new lines with +'s at the end of each line.

aka:

var new_comment_form = 
"<form id='add_comment' method='post'>"+
  "<textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>"+
      problem_comment_text +
  "</textarea>"+
  "<input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' />"+
  "<input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' />"+
  "<input type='submit' class='button' value='Edit Message' />"+
  "<input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' />"+
"</form>";

Edit: If you're still experiencing some alignment issues, this is approximately what you'd want to do with the floats http://jsfiddle.net/G2qsp/2/

Now, to flee before someone attacks me for using clear:both...

Upvotes: 5

Awadhendra
Awadhendra

Reputation: 513

You can solve this problem using two ways, 1) Use table with two columns, one contain first button and other one contain second button. 2) You can also use margin-top style whose value is negative.

Upvotes: 0

Related Questions