Jquery UI button issue

Question

Please take a look at this

http://jsfiddle.net/WAre9/4/

The problem is, after changing the text of link, .button() doesn't work properly.

Here is scrshot before:

enter image description here

And after mouse click:

enter image description here

As you see all paddings, font styles have gone. Any suggestion? How to fix this problem?

There are no styles in fiddle. – loler Jul 22 '12 at 11:08 — loler, Jul 22 '12 at 11:08
@loler updated. sorry for old link – heron Jul 22 '12 at 11:10 — heron, Jul 22 '12 at 11:10

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

This is from How do I replace jQueryUI button text?

Maybe you could use the label option of the jQuery UI button now instead?
$("#mybutton").button().toggle(function() {
  $(this).button('option', 'label', 'Stop');
}, function() {
  $(this).button('option', 'label', 'Start');
});
jsbin preview here

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 22 '12 at 11:10

Troy Cosentino

4,658
9
37
59

this worked for me, thx very much, but why 'option', 'label' not just 'label'?? – heron Jul 22 '12 at 11:16
if you go here: http://jqueryui.com/demos/button/ and look, it is because label is one of the 'options' of the button, you can look under methods too. hope this helps – Troy Cosentino Jul 22 '12 at 11:18
One more thing, it's not related to this question but maybe you know. I'm using CSS reset technique, but jquery-ui widgets including button, are showing very huge, I mean font size. How can I scale size down? – heron Jul 22 '12 at 11:21

score 1 · Answer 2 · answered Jul 22 '12 at 11:15

1

It's because the span tag is removed after setting element.text see this fiddle:

http://jsfiddle.net/WAre9/8/

or you can just change text of span element:

http://jsfiddle.net/WAre9/10/

answered Jul 22 '12 at 11:15

loler

2,594
1
20
30

score 0 · Answer 3 · answered Jul 22 '12 at 11:16

0

http://jsfiddle.net/Bue3B/

use children('span').text...

answered Jul 22 '12 at 11:16

user1502679

566
2
5
9

Jquery UI button issue

3 Answers3