I have a survey that contains several matrix questions of which all except one, have a N/A at the end. I have custom CSS code to populate the last field with "N/A" text. However, this code is overriding the matrix question that contains only a 1 thru 5. In the placement of the "5" the preview survey is populating "N/A" instead. Any thought on what code I should use?
Post the code you are currently using.
* Place your CSS here */
.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer {text-align:center!important}
@media (min-width: 440px) {
/*Hide the scale point description meant for mobile from appearing on desktop*/
.Skin .QuestionBody span.mobonly {
display: None;
}
/*Makes the N/A column light gray on desktop*/
.last {
background-color: rgba(0,0,0,0.05);
}
/*Sets the width of the logo on desktop*/
#logo {
}
}
@media (max-width: 440px) {
/*Sets the width of the logo on mobile*/
#logo {
width:100%;
}
#logo2 {
width:80%;
}
th {
font-weight: bold;
}
}
tr.ChoiceRow {
counter-reset: matrixCounter;
}
.q-radio.q-checked:before {
color: #fff;
}
html .Skin label.q-radio:hover {
background-color: rgba(0,0,0,0.11);
}
.q-radio:before {
content: counter(matrixCounter);
counter-increment: matrixCounter;
line-height: 2.5em;
}
html .Skin label.q-radio {
background-color: rgba(0,0,0,0.06);
width: 4em;
height: 2.5em;
display: inline-block;
border: none;
border-radius: 10%;
cursor: pointer;
margin-bottom: 5px;
}
.Skin .Matrix tr.Answers {
display: None;
}
.Skin .Matrix td.ColumnLabels tr.SpreadLabels th.Last {
text-align: right;
padding-right: 100px;
}
.Matrix .QuestionBody td.last .q-radio:before {
content: 'N/A';
}
.Skin label.MultipleAnswer span::before, .Skin label.SingleAnswer span::before {
display: none;
}
.Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked {
background: #00175A;
border-color: #000;
color: #fff;
}
Thank you Tom, I appreciate any suggestions!
Try adding this JS to the question where you don't want the last column formatted differently (I haven't tried it):
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" .last").removeClass("last");
});
Thank you Tom!!! It worked! I can't tell you how much I appreciate your help. Kind Regards, Karen
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.