Hi. 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.
+1
A:
normally:
$(theElement).css('height','...px').css('width','...px');
joanballester
2010-04-27 18:50:24
You can pass `.css()` an object as well: `.css({ height:10, width:10})`
Nick Craver
2010-04-27 18:56:55
And .height('Xpx') too (I think so)
joanballester
2010-04-27 19:28:40
+1
A:
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' });
Jakob Kruse
2010-04-27 18:54:43
Thanks, Jakob. I guess the part that puzzled me was there was no built-in way of setting it within the Button control. In other words, you'd set the button's width="100px" and height="25px" and it would automatically calculate the correct padding-top/bottom for the LABEL.
Alex
2010-04-27 20:13:26
Was that a question? Setting height doesn't work because the label is not vertically centered on the button, but rather offset using padding. So to set a different height you have to use padding-top and padding-bottom.
Jakob Kruse
2010-04-27 20:17:55
No, more of a comment on the Button control. But now I understand how it works. Thanks :)
Alex
2010-04-27 20:34:55