CSS Code for MaxDiff Tables | XM Community
Solved

CSS Code for MaxDiff Tables

K
Rank
Userlevel 7
Badge +19
  • Kate
  • Level 5 ●●●●●
  • 544 replies
Does anyone have any suggestions for editing the table padding on the MaxDiff Questions? The marketing team is interested in a Messaging MaxDiff and my choice selections are a little wordy. It looks super clunky:

!
icon

Best answer by PraDeepKotian_Ugam 7 January 2019, 04:31

View original

10 replies

A
Hello @Kate ,

Paste the below code in js(OnReady) of the MaxDiff question

` jQuery("#"+this.questionId+" table th.c4").css({"text-align":"left","line-height":"1.5"});`
K
Rank
Userlevel 7
Badge +19
Thanks, @Shashi! That's better, but not quite what I had in mind. I like the left align, and the line height adjustment helps me. But I'm hoping for less padding around my radio buttons, and a wider cell for the answer selections. We're still looking pretty crowded:

!
PraDeepKotian_Ugam
Rank
Userlevel 6
Badge +21
hi @Kate ,

Add below code to remove padding around radio buttons:

jQuery("#"+this.questionId+" table th.c4").css({"text-align":"left","line-height":"1.5"});
jQuery("#"+this.questionId+" table td").css({"width":"0px"});
jQuery("#"+this.questionId+" table th").css({"width":"0px"});
K
Rank
Userlevel 7
Badge +19
There it is! Thank you so much @PraDeepKotian_Ugam.

!
1 Attachment
E

PraDeepKotian_Ugam I just tried to use the code you provided Kate to remove padding from around the radio buttons on my MaxDiff survey, but it did not work for me. I am new to using custom code and wonder if I input it in the wrong spot? Is this the correct spot to enter the code? Thanks!
image.png

K
Rank
Userlevel 7
Badge +19

Eliza It's the question itself that requires the edit 🙂

image.png

E

Kate Thank you for the reply! I am using the MaxDiff project type (not the standard survey project), so there is no option for JavaScript on the individual question. Do you know if there is a way to accomplish this for a MaxDiff project? It just shows up as a locked block. When I used custom code last time to adjust the image size I had to input the code where I showed in my last post.
image.png

K
Rank
Userlevel 7
Badge +19

Eliza I'm not sure what the pros/cons are of using the MaxDif project... I'm using a Matrix table, technically.
image.png
If I had to guess, I suspect that perhaps this doesn't play as nicely with dashboards. Since the MaxDiff requires special calculations beyond averages and simple descriptive statistics, I bet the project is designed to play better with built in reporting options. That said- I create the report for this project manually, so it's no trouble for me. Maybe some other savvy community users have a solution for the project.

E

Kate Ok, that makes sense. Yes, we use the built in reporting features associated with the MaxDiff project type, but you're right. It's harder to customize. Thanks for the reply anyway!

E

I just found some code that works for the MaxDiff project type! Posting here for reference if anyone else looks at this thread :)

thead th.c4, thead th.c5 {
width: 5%;
}
thead td.c4 {
width: 90%;
}

Leave a Reply


Terms & Conditions