JQuery Button - Maintain height when text removed

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

W开发者_运维知识库hen 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?

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.

You can add the following to your CSS:

.widget-button { min-height: 23px }

Set the min-height to whatever you want, I think 23px is the standard for most of jQuery UI. min-width is also available if you want to set a width too.

If I recall, jQuery UI's button heights are relative to the size of text within. As such, the min-height CSS solutions will give the button height, but it likely won't be exactly what the height was with the text--which likely varies from browser to browser and installed font to installed font causing a visual shift in height when the text is cleared.

As such, I would not use CSS as a solution but rather instead of clearing out the text, replace it with an  

(all that said, I would be curious as to what one would do with a blank button from a UI/UX perspective)

Just define proper value of min-height for that button in CSS.

You could also do this with pure CSS, and always have value of the button (which is good when it comes to screen-readers etc.

.widget-button { text-indent: -9999px; }

use the min-height "hack" so that it works in all browsers:

.selector{
     min-height:23px; 
     height:auto !important;
     height:23px
}

where min-height and the second height is the height you want the element to be minimum

since you are identifying the button (or buttons) by class you may either use that class as a css class and set a fixed height or a min height like this.

.widget-button
        {
            height:25px; 
        }    

.widget-button
        {
            min-height:25px; 
        }  

or if you are wanting to seperate class names used by jquery from class names used for css you can go with

.widget-button-ui
        {
            height:25px;
        }   

and apply multiple class names to the object like:

<input type="button" id="demobutton" class="widget-button widget-button-ui" value="Hello World" />

final option, fix it in the mark up like:

<input type="button" id="demobutton" class="widget-button" value="Hello World" style="min-height:23px;" />

the way styles are applied, the style value in the markup itself will take precedence.