using jQuery html() doesn't retain css?

Question

I have the following html (fiddle link)

 <div class="thumbnail_follow" id="follow_btn-2">
   <a  class="btn btn-primary" data-method="post" data-remote="true" rel="nofollow">Follow</a>
 </div>

upon clicking on the button, I want the button to replace itself with an unfollow button with the html of

  <div class="thumbnail_follow" id="follow_btn-2">
<a href="/users/2/unfollow" class="btn btn-danger" data-method="post" data-remote="true" rel="nofollow">Unfollow</a>
</div>

So basically, change the button and the link which it points to

I use jQuery html() like this

 $("#follow_btn-2").html('<a class=\"btn btn-danger\" data-method=\"post\" data-remote=\"true\" rel=\"nofollow\">Unfollow<\/a>');

note this is generated via rails ujs from the code

$("div[id='follow_btn-<%= @user.id %>']").html('<%=j link_to "Unfollow", unfollow_user_path(@user), :remote => true, :method => :post , :class=>"btn btn-danger"%>');

the problem, as visible from the jsfiddle, is that once the button is replaced with the red one, it jumps away as if its style got messed up..

I don't understand what is causing the jump and how to fix it.. Is it a css problem or a bad jQuery usage?

here is the fiddle once more

You are certainly making this hard for yourself, instead of replacing the button completely, why not change the attributes with .attr()? — Andy
– Andy, Commented Apr 17, 2013 at 10:13
And if you can, find a way to stop using !important - it is generally not required. See css-tricks.com/when-using-important-is-the-right-choice — andyb
– andyb, Commented Apr 17, 2013 at 10:17

Adil Shaikh · Accepted Answer · 2013-04-17 10:12:40Z

3

You need to increase width of container to properly fit your button.

width: 200px !important;

Your red button has more width then your blue button

Fiddle

answered Apr 17, 2013 at 10:12

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael · Accepted Answer · 2013-04-17 10:15:34Z

1

Its because Follow is shorter than Unfollow and your container (thumbnail_car) is to small.

answered Apr 17, 2013 at 10:15

Michael

1,32211 silver badges17 bronze badges

Collectives™ on Stack Overflow

using jQuery html() doesn't retain css?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related