Question

I’m adding the text Like with jQuery. This gives 20px of width to the elements that contain that text (they have width: auto). If you click the a.gdt-starrating link the text Like changes to Liked which now has 25px (due to the extra letter ‘d’). But the elements still having 20px. So the text overflows the elements containing it.

$j(".gdup a.gdt-starrating").text("Like");
$j(".gdup div.gdt-starrating").text("Liked");
$j("a.gdt-starrating").live("click", function() {
    $j(".gdup div.gdt-starrating").text("Liked");
});

Here is a live example:

http://www.taiwantalk.org/topic/asdasdasdasdasdgg/

If you click the Like link you will see the issue.

Any suggestions to fix this?

Answer 1

problem is this css rule

.gdt-size-20.gdthumb, .gdt-size-20.gdthumb a, .gdt-size-20.gdthumb div {
   width: 20px;
   height: 20px;
}

in http://www.taiwantalk.org/wp-content/plugins/gd-star-rating/css/gdsr.css.php