HI!
I'm using tabs on a web site and load some content via ajax. I want to use JqueryUI radiobuttons there. But there's a problem of styling.
That's what i have:
$tabs.tabs('add', 'order.php?id='+num, "Order #"+num);
and order php file for example:
$('#gotorderby".$orderid."').buttonset();
- ....[some code here]...
<div id='gotorderby".$orderid."' class='bset'>
<input type='radio' id='radio6' name='gotby".$orderid."' checked='checked' /><label for='radio6' style='width:187px;'>Cart</label>
<input type='radio' id='radio7' name='gotby".$orderid."' /><label for='radio7' style='width:187.5px;'>Phone</label>
</div>
When i add one tab it's all ok, but when i add second all my radiobuttons get additional <span> tag inside, and height increaes. it aslo increases on all radiobuttons on a previuos tabs.
After some added tabs result is:
<div class="bset ui-buttonset" id="delivery2">
<input type="radio" checked="checked" name="deliv2" id="radio1" class="ui-helper-hidden-accessible">
<label style="width: 187px;" for="radio1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" aria-pressed="true" role="button" aria-disabled="false">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
Доставка</span></span></span></span>
</label>
<input type="radio" name="deliv2" id="radio2" class="ui-helper-hidden-accessible">
<label style="width: 187.5px;" for="radio2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">
<span class="ui-button-text">Самовывоз
</span></span></span></span>
- </label>
- </div>
I treid to solve the problems, but still no result. Can anyone figure what's wrong?
I've attached a screenshot to show how does it looks.