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