CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
jeffery_the_wind
jeffery_the_wind

Reputation: 18208

How to set with the width for a whole buttonset?

Please consider this code here, also given is this fiddle: http://jsfiddle.net/DPNc6/

HTML:

<div style="width:500px" id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>​

JS;

$('#radio').buttonset()​

As you all can see, I am trying to make the whole buttonset fill a width of 500px, but using this style attribute does not seem to do anything. How do I set the width of the whole buttonset to but some number of pixels?

Thanks!

Upvotes: 0

Views: 92

Answers (2)

Royce Feng
Royce Feng

Reputation: 1663

I believe the best cross-browser compatible solution that will work for a variable number of buttons is to wrap it in a table: http://jsfiddle.net/DPNc6/1/

Upvotes: 1

meustrus
meustrus

Reputation: 7315

Try:

$('#radio input').css('width', '30%');

It will probably overflow a bit due to padding and margin, so you might want to do some correction:

var $inputs = $('#radio input');
var w = (500 / 3) - ($inputs.length * ($inputs.css('padding-left') +
                                       $inputs.css('padding-right')));
// I'm assuming the buttons are still `display: inline` so let's position them
// absolutely and give them some margin.
var margin = 5;
w -= ($inputs.length - 1) * margin;

var l = 0 - margin;
$('#radio').css('position', 'relative');
$inputs.each(function() {
  $(this).css({
    'width' : w,
    'position' : 'absolute',
    'left' : l
  });
  l += w + m;
});

Upvotes: 1

Related Questions