Colouring alternate rows on a bipolar matrix question | XM Community
Skip to main content

Colouring alternate rows on a bipolar matrix question

  • December 21, 2022
  • 6 replies
  • 307 views

Forum|alt.badge.img+1

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 :)

6 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • December 21, 2022

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!


Forum|alt.badge.img+1
  • Author
  • December 22, 2022

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

image.png


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • December 22, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/53410#Comment_53410I was able to achieve it by including!important
Screenshot_2022-12-22-16-57-01-64_40deb401b9ffe8e1df2f1cc5ba480b12.jpgThrough same code, not sure where you are facing issue , just add !important to the code in that post.
Hope it helps!


Forum|alt.badge.img+1
  • Author
  • December 22, 2022

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 :)


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • December 22, 2022

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • December 22, 2022

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