Définition de la largeur des boutons radio lors de l'utilisation de jQueryUI

Question

J'utilise les boutons radio de l'interface utilisateur jQuery et je n'arrive pas à les définir sur une largeur fixe.

Le code J'utilise est:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#radio").buttonset(); 
    }); 
</script> 

<div id="radio"> 
    <input type="radio" id="radio1" name="radio" /><label for="radio1">A</label> 
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label> 
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
</div> 

J'utilise jQuery pour la première fois, et ont peu de CSS ou javascript expérience. J'ai essayé toutes sortes de combinaisons bizarres pour essayer de spécifier une largeur fixe pour les boutons sans perdre le style de l'interface utilisateur jQuery, mais je n'ai pas eu de chance.

Toute aide serait appréciée.

Answer 1

Vous pouvez régler la largeur des <label> éléments qu'il est l'affichage en utilisant .width(val) comme ceci:

$("#radio").buttonset().find('label').width(200); 

You can give it a try here, alternativement, vous pouvez simplement ajouter une règle CSS comme ceci:

​#radio label { width: 200px }​ 

You can try that out here.

Answer 2

Les œuvres ci-dessous pour les boutons radio normales et celles avec des icônes que

.myradiolables 
{ 
width: 200px; 
height: 20px; 
} 

<div id="radio"> 
<input type="radio" id="radio1" name="radio" /><label class="myradiolabels" for="radio1">A</label> 
<input type="radio" id="radio2" name="radio" checked="checked" /><label class="myradiolabels" for="radio2">Choice 2 - long long</label> 
<input type="radio" id="radio3" name="radio" /><label class="myradiolabels" for="radio3">Choice 3</label> 
</div>