Question

I am using jQuery UI buttonset as below

<div id="radioSet">
    <input type="checkbox" id="radio1" name="radio" /><label for="radio1">A</label>
    <input type="checkbox" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label>
    <input type="checkbox" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>​

$(document).ready(function () {
    $("#radioSet").buttonset().find('label').css({ 'width': '100px', 'height': '100px'});
});​

The button set layout has issues (irregular placement) with above code. The layout works fine If I reduce text length (or increase width) so that the text fits in button without requiring wrap. It seems that text wrap is causing this issue.

How do I achieve equal sized buttons in the button set?

Answer 1

Here’s a workaround if you want to do it dynamically:

$(document).ready(function () {
    $("#radioSet").buttonset();

    var longest = 0;
    $("#radioSet .ui-button").each(function(){
        if ($(this).width() > longest)
            longest = $(this).width();
    }).each(function(){
        $(this).width(longest);
    });
});​

Here’s a shot of it in action: http://jsfiddle.net/b77DS/2/