Question

I have a button in a form (which is styled with jQuery UI), and am dynamically changing the text with JavaScript. For some reason, changing the text makes the button size shrink to an unusual size. What can I do to remedy this?

Here is a picture of the problem:

---

---

Answer 1

You probably change the text of the button the wrong way. For instance, if you simply do $('#button').text('Test') or $('#button').html('Test') you will overwrite the span element jQuery emits for styling purposes.

Try this:

$('#button').find('span').text('Test');

EDIT:

I just found a cleaner way to do this:

$('#button').button('option', 'label', 'Test');