CODEWITHSUNDEEP
jqueryjquery-ui
Alex
Alex

Reputation: 35851

How do you size the jQuery Button?

I'm using the jQuery UI Button control but don'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.

Upvotes: 28

Views: 67698

Answers (7)

MJ Storm
MJ Storm

Reputation: 11

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

Upvotes: 1

Xavier John
Xavier John

Reputation: 9447

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

Upvotes: 4

Savanetech
Savanetech

Reputation: 206

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.

Upvotes: 2

scott
scott

Reputation: 51

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
}

Upvotes: 5

Usha
Usha

Reputation: 11

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;
}

Upvotes: 1

Jakob Kruse
Jakob Kruse

Reputation: 2494

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

Upvotes: 31

joanballester
joanballester

Reputation: 217

normally:

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

Upvotes: 7

Related Questions