Response title
This is preview!
icons within tabs don't display properly
in Using jQuery UI
•
10 years ago
What's wrong with the code below ? I cannot use icons within tabs. The icons (#toolSet) doesn't display properly. Same code outside the tabs (#toolSet2) works fine.
- <div id="tabs">
- <ul>
- <li><a href="#tab1">Summary</a></li>
- </ul>
- <div id="tab1">
- <div id="toolSet" class="ui-widget" >
- <input type="radio" id="arrow" name="tool" /><label for="arrow" class="ui-icon ui-icon-arrow-4">Arrow</label>
- <input type="radio" id="arrow_diag" name="tool" /><label for="arrow_diag" class="ui-icon ui-icon-arrow-4-diag">Arrow diag</label>
- </div>
- </div>
- </div>
- <div id="toolSet2" class="ui-widget" >
- <input type="radio" id="arrow2" name="tool2" /><label for="arrow2" class="ui-icon ui-icon-arrow-4">Arrow2</label>
- <input type="radio" id="arrow_diag2" name="tool2" /><label for="arrow_diag2" class="ui-icon ui-icon-arrow-4-diag">Arrow diag2</label>
- </div>
- $(document).ready(function(){
- $('#toolSet').buttonset();
- $('#tabs').tabs();
- $('#toolSet2').buttonset();
- });
Live code here :
I think the class ui-widget-content forces the background, so it cannot be overriden by background-position of ui-icon-arrow-4.
I found a similar ticket (#ticket 4401). But I don't understand the resolution.
Thanks
Benoit
1