How to set fixed width on buttons in jQuery button set?

Question

I have a set of buttons and you want to set the width of each button so that they can be the same size (i.e. if I have 4 buttons, 25% of each element)

Basically, the site has a table on the left, and inside this table I have 4 options. The way it is now is not using a 100% left column, so it looks bad. I want the button to be set to 100% of the column, and each button share 25% of the fixed space.

I tried using .css ('width') each button element, but that does not change.

My code looks something like this:

<script type='text/javascript'> $( function() { $("#task-sort").buttonset(); } ); </script> <div id='task-sort'> <input type='radio' name='task-sort' id='sort_all' checked><label for='sort_all'>All</label> <input type='radio' name='task-sort' id='sort_inc'><label for='sort_inc'>Incomplete</label> <input type='radio' name='task-sort' id='sort_com'><label for='sort_com'>Completed</label> </div> 

Answer 1

You can do it as follows:

 $("#task-sort").buttonset().find('label').css('width', '25%');​​​​​​​​​​​​​​​​ 

After .buttonset() your html looks like this:

 <div id="task-sort" class="ui-buttonset"> <input type="radio" name="task-sort" id="sort_all" checked="" class="ui-helper-hidden-accessible"> <label for="sort_all" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="true" role="button" aria-disabled="false"><span class="ui-button-text">All</span></label> <input type="radio" name="task-sort" id="sort_inc" class="ui-helper-hidden-accessible"> <label for="sort_inc" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Incomplete</span></label> <input type="radio" name="task-sort" id="sort_com" class="ui-helper-hidden-accessible"> <label for="sort_com" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false"><span class="ui-button-text">Completed</span></label> </div> 

Then you just need to set the width for those newly created <label> elements to get the desired effect, you can try the demo here .