Applying css to a multi response question formatted as columns | XM Community
Skip to main content

Hello,
I would like help on applying css to a multi response question that is aligned in columns. I have basic skills when it comes to css and currently have css applied in the look and feel tab for all questions, which currently works for all, however, when I align a multi response into columns it wont pick up the style. I cant see what the difference is to be able to account for it in the existing css.
Below: Image 1 is what I would like and Image 2 is what I would like to fix.
The css currently used is:
/*answer choice unselected*/
.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer,.Skin label.SingleAnswer,.Skin .MC .MAHR .QuestionBody table td label, .Skin .MC .SAHR .QuestionBody table td label {
  text-align: center;
  background-color: #0a1633;
  border: 1px solid white;
  border-radius:6px;
  color:#f1f1f1;
}

/*hover answer choice*/
.Skin label.MultipleAnswer.q-checked.q-focused:hover,.Skin label.MultipleAnswer.q-checked:hover,.Skin label.SingleAnswer.q-checked.q-focused:hover,.Skin label.SingleAnswer.q-checked:hover,.Skin label.SingleAnswer:hover,.Skin label.MultipleAnswer:hover,.Skin .q-matrix .single-answer.mobile:hover,.Skin .q-matrix .multiple-answer.mobile:hover{
border:1px solid #FFFFF0!important;
background-color: #096dd2!important;
color: #FFFFF0;
border-radius:6px;
box-shadow: -.150vw .150vw 0 0 lightgray;
}

/*selected answer choice*/
.Skin label.MultipleAnswer.q-checked, .Skin label.MultipleAnswer.q-checked.q-focused, .Skin label.SingleAnswer.q-checked, .Skin label.SingleAnswer.q-checked.q-focused {
  border:1px solid #FFFFF0!important;
  background-color: #096dd2!important;
  color: #FFFFF0;
  border-radius:6px;
}

Image 1.pngImage2.png

Hi there, the CSS for the hover and selected portions look okay to me. For the unselected, it looks like it's only referencing MAVR, SAVR, MAHR, and SAHR, which I believe correspond to Multiple Answer Vertical Responses, Single Answer Vertical Responses, Multiple Answer Horizontal Responses, and Single Answer Horizontal Responses. You could include MACOL and SACOL for Multiple Answer Column and Single Answer Column, but you can also remove those bits and it should work for all 3 alignments, like in the below:
.Skin .MC label.MultipleAnswer, .Skin .MC label.SingleAnswer {
  
  text-align: center;
  background-color: #0a1633;
  border: 1px solid white;
  border-radius:6px;
  color:#f1f1f1;

}

Thank you! I had no idea what those codes referred to, appreciate your help.

Leave a Reply


Terms & Conditions