I'm using buttonset to display radio buttons, like shown on
tutorialsScript
- $(function() {
- $( "#change_view" ).buttonset(
- $( "#detail" ).button({text: false, icons: {primary:'ui-icon-sr-detail'}}),
- $( "#list" ).button({text: false, icons: {primary:'ui-icon-sr-list'}}),
- $( "#grid" ).button({text: false, icons: {primary:'ui-icon-sr-grid'}})
- );
- });
HTML
- <div id="change_view">
- <input type="radio" id="detail" name="radio" /><label for="detail">Choice 1</label>
- <input type="radio" id="list" name="radio" checked="checked" /><label for="list">Choice 2</label>
- <input type="radio" id="grid" name="radio" /><label for="grid">Choice 3</label>
- </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
- $( "#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?