Hi there,
I'm using the bipolar matrix question format and would like to colour the backgrounds of alternating rows. I've found the answer below which achieves the style I'd like but for a standard matrix table. I can't work out how to get the same look for a bipolar matrix!
https://community.qualtrics.com/XMcommunity/discussion/4716/how-can-i-apply-colour-to-alternate-rows-within-a-matrix-tableUsing the CSS in the answer provided to the above question shades the background of the radio buttons in the middle, but not of the answer option labels.
Thanks in advance :)
https://community.qualtrics.com/XMcommunity/discussion/23399/colouring-alternate-rows-on-a-bipolar-matrix-questionOn the same code try including " !important;" after the color mentioned.
You can learn more here
Hope it helps!
https://community.qualtrics.com/XMcommunity/discussion/comment/53392#Comment_53392Hi Deepak,
Thanks so much for your reply! Unfortunately adding '!Important' didn't resolve it. Using the code below I've been able to colour alternate rows of the sections in the middle of the scale housing the radio buttons, and all of the answer option labels in a single colour (see image attached). But ideally I need to shade the whole of each alternate row, and nothing I try seems to achieve this! Any ideas what code I'd need to include or change to alternately colour the answer options as well as the radio buttons? I've tried adding a 'ReadableAlt' for AnswerLeft and AnswerRight, but that doesn't seem to work and I'm not sure where the 'ReadableAlt' bit should go (if that's what's needed).
Thanks again!
.Skin .Matrix .Bipolar tr.ChoiceRow td {
background-color:#F0F0F0 !Important;
}
.Skin .Matrix .Bipolar tr.ChoiceRow.ReadableAlt td {
background-color:white !Important;
}
.Skin .Matrix .Bipolar td.AnswerLeft,.Skin .Matrix .Bipolar th.AnswerLeft{
background-color:#F0F0F0 !Important;
}
.Skin .Matrix .Bipolar td.AnswerRight,.Skin .Matrix .Bipolar th.AnswerRight{
background-color:#F0F0F0 !Important;
}
https://community.qualtrics.com/XMcommunity/discussion/comment/53410#Comment_53410I was able to achieve it by including!important
Through same code, not sure where you are facing issue , just add !important to the code in that post.
Hope it helps!
https://community.qualtrics.com/XMcommunity/discussion/comment/53412#Comment_53412Thanks so much Deepak! No matter what I do I can't get it to work, and I already have !important in the code I shared above. Would you mind sharing the exact code you've used to achieve that so I can see where I'm going wrong?
Thanks again :)
https://community.qualtrics.com/XMcommunity/discussion/comment/53413#Comment_53413I have added important in the code mentioned in this post accepted answer
https://community.qualtrics.com/XMcommunity/discussion/4716/how-can-i-apply-colour-to-alternate-rows-within-a-matrix-table
@amygreen,
My guess is there is a media rule that prevents the CSS from working. Try this JS:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" tr.ReadableAlt").css("background-color","#F0F0F0");
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.