How do you size the jQuery Button?

I'm using the jQuery UI Button control but do开发者_开发问答n't seem to be able to adjust the size (width and height). Here's the API documentation. I tried setting a STYLE attribute on it, but then the LABEL wasn't centered correctly. Thanks.

Try this in the style attribute:

width: 300px;
padding-top: 10px;
padding-bottom: 10px;

or

$(element).css({ width: '300px', 'padding-top': '10px', 'padding-bottom': '10px' });

normally:

$(theElement).css('height','...px').css('width','...px');

You can style the .ui-button.ui-widget (no spaces, must have both classes). (make sure your stylesheet appears below the jquery ui one). You can also style

.ui-button.ui-widget{
     height, width
}

.ui-button.ui-widget .ui-button-text{
    line-height, font-size
}

Here is my solution to make jquery UI button the same width. First I need a method to get the max width.

var greatestWidth = 0;   // Stores the greatest width
function getMaxWidth() {
    var theWidth = $(this).width();   // Grab the current width

    if( theWidth > greatestWidth) {   // If theWidth > the greatestWidth so far,
        greatestWidth = theWidth;     //    set greatestWidth to theWidth
    }
}

Then I call this method after hooking up the button and set the size. example

  $('.selector')
        .button()
        .each(getMaxWidth);
  $('.selector').width(greatestWidth);

I found that putting <small></small> around the button tags helps a lot. This is only beneficial in certain cases, but it helped me to reduce the size on a project I was working on.

You can the style the element with relative font-size. If your button has the custome class 'buttonStyle' then add this to the CSS

.buttonStyle{
 font-size:0.8em;
}

Based off of this documentation http://api.jquery.com/height/ the below worked for:

$('#mybutton').button({ icons: { primary: "ui-icon-plus" }, text: false}).height(20);