jQuery UI: changing button text distorts button sizing

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:

Different button sizes

You need to post a working version on jsFiddle. There are a LOT of reasons why this could have happened. — Brian Hoover
– Brian Hoover, Commented Aug 29, 2012 at 15:02
Often, re-initializing the button creator will fix these things. — Blazemonger
– Blazemonger, Commented Aug 29, 2012 at 15:03

lalibi · Accepted Answer · 2012-08-29 15:07:02Z

6

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');

answered Aug 29, 2012 at 15:07

lalibi

3,0884 gold badges35 silver badges42 bronze badges

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

1 Comment

Juliyanage Silva Over a year ago

finally!..It works perfectly and this theory solves lots of same kind of problems.

Collectives™ on Stack Overflow

jQuery UI: changing button text distorts button sizing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related