input field won't center after jquery replaceWith

dummy@example.com (jens0771) — Fri, 29 Jul 2011 12:42:09 +0000

I feel a little out of place putting this here, but I'm pretty new to all of this so please excuse my ignorance. So I've got a form that an image is clicked on then is replaced with an input field. The jquery looks great, but I've got the problem of styling it. The only real problem is trying to get it centered. I can do this via margin left, but when viewed on mobile devices, it's all messed up, so I realized centering it in the form div works great on the mobile devices, but not on the web browser for the computers.

Basically, I have the following code for the form name:

#name_img
#name_form
= f.text_field :name

Here's the css:

#name_img {
background-image:url('name.png');
width:202px;
height:48px;
margin:0px auto;
}

#name_form {
margin:0px auto;
}

The name img when clicked fades out and is replaced w/ the name input field "#name_form". I figure it has to deal with the replaceWith not reading the #name_form when loading it.

Just for good measure here is the JS: (coffeescript)
$("#name_img").click ->
$(this).fadeOut("slow").replaceWith $("#name_form")
$("#name_form").fadeIn "slow"

Again, all I'm having problems with is centering the #name_form using margin: 0px auto;
Edit: To clarify, I can get it looking just fine on desktop browsers, the problem arises when using mobile browsers. It's only the form fields that get offset, and so when I use the margin auto, desktop browsers don't recognize, and mobile do.

Thank you for you're help in advance

Rails Forum - Ruby on Rails Help and Discussion Forum - input field won't center after jquery replaceWith

input field won't center after jquery replaceWith