Coding for shading alternate rows in matrix not working | XM Community
Skip to main content

Hi. I have looked up coding for shading alternate rows in a matrix table and none of them work. What happens is when I hover over a row, it then shades it, but when I don’t hover, the matrix is all white. Any suggestions as to what I’m doing wrong would be helpful!

Here are all the coding options I’ve tried:

In the javascript section of the individual question:

/*jQuery("#"+Q4-6.questionId+" .ChoiceRow:odd").css("background","#DCD5E5");*/

In the look and feel section: 

Option 1:

tr.ChoiceRow{
background-color:#DCD5E5;
}
tr.ChoiceRow.ReadableAlt{
background-color:white;
}

Option 2:

jQuery("tr.ChoiceRow").each(function(index){
jQuery(" td:odd", this).css({"background-color":" DCD5E5"});
});
jQuery("tr.Answers th:odd").css({"background-color":"DCD5E5"});

Option 3:

.Matrix .ReadableAlt {
background: #DCD5E5;
}

To add alternate row shading to matrix questions you can use the below JS:

jQuery("#"+this.questionId+" .ChoiceRow:odd").css("background","#F8F8F8");

You could also add this through the Style section of the Look & Feel with the below:

.ChoiceRow:nth-child(odd) {
  background-color:#F8F8F8;
}

Hovering over an option will add shading to the row. I found that this doesn't look the best when hovering over a white row in between 2 shaded rows. You can change the styling on the hover by adding some CSS. For example, the below will add a black border around the row that is hovered over:

@media all and (min-width:480px){

.Matrix table{
border-collapse:collapse !important;
}

.Skin .ChoiceRow:hover {
background-color: rgb(255, 255, 255);
outline: 1px solid black !important;
outline-offset: -1px !important;
}

}

Lately, I've been leaning towards adding row dividers. I think this helps visually separate the matrix rows but also doesn't interfere with the hover shading. To put that in place, try adding the below CSS:

@media all and (min-width:480px){

.ChoiceRow td {
    border-bottom: 1px solid lightgray;
}

.ChoiceRow th {
    border-bottom: 1px solid lightgray;
}

}

 

@Tom_1842  the row divider coding worked, thank you! I really like how that looks. 

Leave a Reply


Terms & Conditions