Ajout de code CSS pour augmenter l’espace entre étiquette et bouton radio - css, qualtrics

J'ai besoin d'augmenter l'espace entre les étiquettes(qui se chevauchent avec mes boutons radio redimensionnés) et les boutons radio. Les extraits de code que j'ai trouvés ne traitent que des étiquettes situées à gauche ou à droite du bouton. Mes étiquettes sont au-dessus du bouton radio, et maintenant les étiquettes de deux lignes (comme "ni aucune aversion, ni comme", qui couvre deux lignes) se chevauchent avec le bouton radio. Je vous remercie!

une capture d'écran de mes boutons radio

Réponses:

Ajoutez ce javascript à votre question sur Qualtrics:

Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var radioCells = $(qid).select("td.ControlContainer");
var limit = radioCells.length;
for(i=0;i<limit;i++) {
radioCells[i].style.paddingTop = "25px";
}
});

Ajustez le "25px" si nécessaire. Vous devriez envisager de passer aux nouveaux thèmes Qualtrics, où les boutons radio disparaissent et les étiquettes deviennent des boutons cliquables.

jsfiddle

Comme je ne suis pas sûr que vous utilisiez bootstrap ou n’importe quel autre framework de layout, voici une solution avec un tableau simple.

td {
width:100px;
text-align: center;
}

<!--EMMET string  table>(tr>(td>label[for=radio$]{myradio$})*5)+(tr>(td>input#radio$[type="radio"][name=myradio])*5)-->
<table>
<tr>
<td><label for="radio1">myradio1</label></td>
<td><label for="radio2">myradio2</label></td>
<td><label for="radio3">myradio3</label></td>
<td><label for="radio4">myradio4</label></td>
<td><label for="radio5">myradio5</label></td>
</tr>
<tr>
<td><input type="radio" id="radio1" name="myradio"></td>
<td><input type="radio" id="radio2" name="myradio"></td>
<td><input type="radio" id="radio3" name="myradio"></td>
<td><input type="radio" id="radio4" name="myradio"></td>
<td><input type="radio" id="radio5" name="myradio"></td>
</tr>