CSS code to call out the content of a particular element of a Matrix question? | XM Community
Skip to main content

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