CODEWITHSUNDEEP
cssqualtrics
M.O.
M.O.

Reputation: 11

Adding CSS code for increasing space between label and radio button

I need to increase the space between the labels (which overlap with my resized radio buttons) and the radio buttons. The code snippets I have found only address the labels being to the left or right of the button. My labels are above the radio button, and now the two line labels (like "neither dislike or like", which spans two lines) are getting overlapped by the radio button. Thank you!

a screenshot of my radio buttons

Upvotes: 1

Views: 586

Answers (2)

T. Gibbons
T. Gibbons

Reputation: 5004

Add this javascript to your Qualtrics question:

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";
    }
});

Adjust the "25px" as necessary. You should consider upgrading to the new Qualtrics themes where the radio buttons go away and the labels become clickable buttons.

Upvotes: 1

santon
santon

Reputation: 1834

jsfiddle

As I am not sure if you are using bootstrap or any other layout framework, here is a solution with a simple table layout.

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>

Upvotes: 0

Related Questions