Setting the width of radio buttons when using jQueryUI

Question

I am using jQuery UI radio buttons, and can't find how to set them all to be a fixed width.

The code I'm using is:

<script type="text/javascript">
    $(document).ready(function () {
        $("#radio").buttonset();
    });
</script>

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

I am using jQuery for the first time, and have little CSS or javascript experience. I've tried all sorts of odd combinations to try and specify a fixed width for the buttons without losing the jQuery UI style, but have had no luck.

Any help would be appreciated.

Answer 1

You can set the width of the <label> elements it's displaying using .width(val) like this:

$("#radio").buttonset().find('label').width(200);

You can give it a try here, alternatively you can just add a CSS rule like this:

​#radio label { width: 200px }​

You can try that out here.

Answer 2

The below works for normal radio buttons and ones with icons only

.myradiolables
{
 width: 200px;
 height: 20px;
}

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