Question

I have a button which I style using jQuery’s UI’s button.

<button class="widget-button">Submit</button>

Based on certain events this button can have its text cleared.

$('.widget-button').button('option', 'label', '');

When this occurs the button’s height becomes smaller. I would like to maintain the button’s height even when no text is shown.

Any ideas on how this can be achieved?

Answer 1

This is untested but, I think, should work (and without seeing your html I can’t offer anything better):

$('.widget-button').css('height', $(this).height()).button('option', 'label', '');

This should, in theory, assign the current height as an inline-style to the .widget-button before clearing the text. You could, of course, also use a data- prefixed custom attribute:

$('.widget-button').attr('data-buttonHeight',$(this).height()).button('option','label','');

But, as noted, this is untested. If you can post your mark-up, and the jQuery code you’re working with to clear the button‘s text we might be able to offer better answers.