Response title
This is preview!
input field won't center after jquery replaceWith
in Using jQuery UI
•
11 years ago
Hey everyone, 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: (rails btw)
#name_img
#name_form
= f.text_field :name
Here's the css: (scss)
#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;
Thank you for you're help in advance :)
1