Setting switch width when using jQueryUI

Question

I am using jQuery UI radio buttons and cannot find how to set them all as a fixed width.

The code I use 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 knowledge of CSS or javascript. I tried all kinds of odd combinations to try and specify a fixed width for the buttons without losing the jQuery UI style, but no luck.

Any help would be appreciated.

Answer 1

You can set the width of the elements <label>displayed using .width(val)as follows:

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

, CSS :

​#radio label { width: 200px }​

.

Answer 2

.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>