jQuery Forum

I'm using buttonset to display radio buttons, like shown on tutorials

Script

1. $(function() {
2.    $( "#change_view" ).buttonset(
3.       $( "#detail" ).button({text: false, icons: {primary:'ui-icon-sr-detail'}}),
4.       $( "#list" ).button({text: false, icons: {primary:'ui-icon-sr-list'}}),
5.       $( "#grid" ).button({text: false, icons: {primary:'ui-icon-sr-grid'}})     
6.    );
7. });

HTML

1. <div id="change_view">
2.       <input type="radio" id="detail" name="radio" /><label for="detail">Choice 1</label>
3.       <input type="radio" id="list" name="radio" checked="checked" /><label for="list">Choice 2</label>
4.       <input type="radio" id="grid" name="radio" /><label for="grid">Choice 3</label>
5. </div>

I want the buttonset made only with icons, but when printed, all the label tag contain the classes ui-button-icon-only and ui-button-text-icon-primary. This thing broke the icon-only declaration in the css and cause the icons shift on the left of the buttons.

My workaround to solve the problem is to remove the class with

1. $( "#change_view" ).children().removeClass("ui-button-text-icon-primary")

....but, as I can see in the tutorials, this strange thing shouldn't be happen.

Someone know why happen or have a better solution?