Hi!
Is there a way to simplify my code? I do not want to add the respective code every time it requires. It will be hassle for me. See attached image. As you can see the SBS# is incrementing by 1 while the c# is incrementing by 4
Thank you!
Simplifying code using similar to nth child
Userlevel 7
+33
Since your CSS is same for all AnswerCell and if you are apply CSS on header instead of look and feel. You can simply do.
Please replace QID1 with your required question's QID.
QID1 .AnswerCell{
border-left: 1px solid #cccccc;
}
https://community.qualtrics.com/XMcommunity/discussion/comment/54366#Comment_54366Thank you for your response and suggestion. It works! but this is not the exact output I'm looking for. By implementing your code. The table got a minimal problem. As you can see from the image below, there's an obvious line in the middle and may cause less clarity to the viewer. So, I hard coded those cell to prevent this kind of output. 
Userlevel 7
+33
What was your earlier output and also whould you like to share your XML? I hope I can help you properly then.
https://community.qualtrics.com/XMcommunity/discussion/comment/54370#Comment_54370/*Side by Side*/
tr.Choice {
border: solid 1px #cccccc;
padding: 5px;
}
tr.Answers {
background-color: #7f35b2;
color: #FFFFFF;
border: solid 1px #000000;
}
tr.Headings {
background-color: #7f35b2;
color: #FFFFFF;
border: solid 1px #000000;
}
td.SBS1.c5.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS2.c9.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS3.c13.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS4.c17.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS5.c21.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS6.c25.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS7.c29.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS8.c33.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS9.c37.AnswerCell {
border-left: solid 1px #cccccc;
}
td.SBS10.c41.AnswerCell {
border-left: solid 1px #cccccc;
}
#QID20 tr.Headings {display:none;}
#QID21 tr.Answers {display:none;}
Here is my code. and below is the output
Userlevel 7
+33
robi_kalinisan , I'm looking into this. get back to you shortly.
Userlevel 7
+33
robi_kalinisan , I'm still confused, as per my understanding in my code you are facing issue with black lines in between of column, but your code is also giving same output as black lines are coming in your setup's column too. do you want to remove those lines? One more problem, when I'm creating new Question all the IDs are getting changed. I'm not getting same output as you have. So much confusion 
https://community.qualtrics.com/XMcommunity/discussion/comment/54375#Comment_54375Not the black lines but those gray lines beside the black lines. If you look closely on the circled area on my 2nd attachment, you will see the black lines has gray lines beside to it. Because if you use the QID in our code, all sides on its left will create a gray line. 
comparison to my hard coded per SBS and c, it is managed only to appear on those 2nd box per column . like this one
The black lines will be there at it is. because they are the division per column.
Userlevel 7
+33
Since you are using odd column then I think, you should try this.
.AnswerCell:nth-child(odd){
border-left: 1px solid #cccccc;
}
for those grey color on separator, and last column you can apply that CSS.
.Choice td:first-child, .Choice td.Separator1, .Separator2{
border-left: 0px solid transparent !important;
border-right: 0px solid transparent !important;
}
.last{
border-right: 1px solid #000000;
}
It's really hard to find the solution without XML.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.