CODE FOR LINES BORDERS AND SHADING FOR MAXDIFF QUESTION | XM Community
Solved

CODE FOR LINES BORDERS AND SHADING FOR MAXDIFF QUESTION

  • 13 February 2021
  • 8 replies
  • 256 views
M
Userlevel 1
Badge

Hello.
I'm trying to redesign a group of MAXDIFF QUESTIONS (matrix type) to include separator lines, borders and color. (A pic of what I'm trying to achieve is included.) Quite desperate at this point tbh. I found code that looked promising below, but it doesn't work. Can anyone offer suggestions that do not include javascript?
.maxdiff .inner_table td {
  border-left: 3px black;
  border-right: 3px black;
  border-style: double;
}
What I hope to achieve:
MaxDiffTable.png

icon

Best answer by ahmedA 14 February 2021, 00:03

View original

8 replies

A
Rank
Userlevel 7
Badge +21

table {
    border: 1px solid black;
    border-collapse: collapse !important;
}
.ChoiceRow td {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.ChoiceRow th {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

M
Userlevel 1
Badge

Hello. Thank you so, so very much much. I'm getting closer. When I put your recommended code into the "Look & Feel" area, black borders appeared on everything throughout the survey that may have had "rows" and "cells", including - for example - the progress bar! (LOL). However, I only needed the MAXDIFF questions modified. So, (not knowing what I'm doing) I tinkered what you shared with me slightly and came up with the following:
.maxdiff .table { border: 1px solid black; border-collapse: collapse !important; } .ChoiceRow td { border-top: 1px solid black; } ChoiceRow th { border-top: 1px solid black; border-bottom: 1px solid black; }
The above code results in the following only with for the MAXDIFF tables in the survey:
MaxDiffTable-2.pngThis is EXCELLENT! I'm so close. Ultimately, though, I'm trying to get a single border around the entire table and change the color for the header row so that the final product looks like this:
MaxDiffTable-3.pngI know nothing, but it seems like I need just a few more lines (I sound like a drug addict) to get me to the end: 1) Border and 2) header row color. Does anything come to your mind?

M
Userlevel 1
Badge

BTW - I Apologize for the code posting horizontally. I didn't intend for it to be that way.

A
Rank
Userlevel 7
Badge +21

  1. Remove the 
    .
    before the table. Why?

  2. thead { background :red; } 
    Other colours.

  3. If it's only for one question, then I would recommend pasting it in the question HTML within the style tags.

  4. More table styling

M
Userlevel 1
Badge

Thank you again.

  1. (Why?) - because I'm learning and I don't know.

  2. I'll try that.

  3. It's for all MAXDIFF tables throughout the document

  4. Thank you for the resource.

M
Userlevel 1
Badge

Finally got it to work with this:


The solution was a combination of recommended code, persistence, and landing on a good resource. It appears I was missing "thead". Now I can get this or any other color.
MaxDiffTable-4.png
Thank you very much again!

L
Badge

Hi there,

Thank you so much for providing this code. I have tried using the code, and it works perfectly, although, I have other questions on the same page, and the code for the table question is also applied for the other questions.

How do I avoid this?

Thanks in advance 🙂

C
Rank
Badge +2

@MCC11201  can you provide the final code you used? I am looking to do this same thing. When I use  the coding below, there are no borders for the middle section, and I can’t figure out what to add to have the header a color.

.maxdiff table {

border: 1px solid black; border-collapse: collapse !important;

}

.ChoiceRow td {

border-top: 1px solid black;

}

ChoiceRow th {

border-top: 1px solid black; border-bottom: 1px solid black;

}

 

 

Leave a Reply


Terms & Conditions