Проблемы измерения jQuery ButtonSet

Question

Я использую набор кнопок jQuery UI, как показано ниже.

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

У макета набора кнопок есть проблемы (неправильное размещение) с приведенным выше кодом.Макет работает нормально, если я уменьшу длину текста (или увеличу ширину), чтобы текст помещался на кнопке без необходимости переноса текста.Кажется, что перенос текста вызывает эту проблему.

Как получить кнопки одинакового размера в наборе кнопок?

Answer 1

Вот обходной путь, если вы хотите сделать это динамически:

$(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);
    });
});​

Вот его пример в действии: http://jsfiddle.net/b77DS/2/