CSS Code - Not Displaying - Line Before Don't Know | XM Community
Skip to main content
Michael_Cooksey
Administrator
1 month ago
Solved

CSS Code - Not Displaying - Line Before Don't Know

M
Level 2 ●●
Forum|alt.badge.img+8

I have a survey with CSS added into the “Look & Feel” portion. It adds a line before the last option (“Other, please specify: “).

In the question preview AND the block preview, this displays perfectly. However, in the survey preview the line is missing.

  • I have tried rebuilding both the question and the block to no avail. Single choice questions in another block work, so unsure about the cause.
  • I tested on both Edge & Chrome and I cleared my cache / cookies.
  • There is no specific HTML in the question.

Does anyone know what could be causing this / how I would fix it? Thank you!

 

 

 
li:last-of-type { border-top: 2px solid #8D8D8D4D; 
}
li:last-of-type label { margin-top:10px; 
}
.Skin #Wrapper {
margin-top: 40px !important;
}
.Skin .EndOfSurvey {
color: #525252;
padding: 10px 40px 60px 40px !important;
}
.Skin .Matrix table thead th:last-of-type {
border-left: 2px solid #8D8D8D4D;
}
.Skin .Matrix table .ChoiceRow td:last-of-type {
border-left: 2px solid #8D8D8D4D;
}
.Skin .Matrix table .ChoiceRow td:last-of-type label {
margin-left:0px;
}
.JFEScope .Skin .Matrix .q-matrix.mobile table td:last-of-type {
border-top: 2px solid #8D8D8D4D;
border-left: 0px;
}
.JFEScope .Skin .Matrix .q-matrix.mobile table td:last-of-type label {
margin-top:0px;
}
.Skin .QuestionOuter.Matrix{
max-width: 100%!important;
}

 

Best answer by MaggieGentry

​@vgayraud and ​@Chee Heng_SZ - I figured out the issue.

I was using a <ul class="ChoiceStructure"> with each choice as a <li class="Selection ...">.So - after running an Inspection - the fix was simple: the last list item doesn't use the class Choice — it uses Selection (Selection reg or Selection alt). That’s why my previous selector wasn’t matching anything.

 

Had to replace Replace li.Choice:last-of-type with li.Selection:last-of-type.

 

Everything else worked perfectly! 

View original

3 replies

C
Level 4 ●●●●
Forum|alt.badge.img+16

Hi ​@MaggieGentry ,

/* This code creates the line */
li:last-of-type { border-top: 2px solid #8D8D8D4D; 
}
/* This code creates the small spacing between the second last and last choice*/
li:last-of-type label { margin-top:10px; 
}

I tried copying the css code and it should work fine.

Did this survey have any other codes added in earlier parts of your survey  that overwrites the border-top as none like in this question?

 

vgayraud
QPN Level 6 ●●●●●●
Forum|alt.badge.img+49
  • vgayraud
  • QPN Level 6 ●●●●●●
  • 395 replies
  • April 7, 2025

Hi ​@MaggieGentry 

Also, your color code is invalid.

Vincent Gayraud
M
Level 2 ●●
Forum|alt.badge.img+8
  • MaggieGentry
  • Author
  • Level 2 ●●
  • 43 replies
  • Answer
  • April 7, 2025

​@vgayraud and ​@Chee Heng_SZ - I figured out the issue.

I was using a <ul class="ChoiceStructure"> with each choice as a <li class="Selection ...">.So - after running an Inspection - the fix was simple: the last list item doesn't use the class Choice — it uses Selection (Selection reg or Selection alt). That’s why my previous selector wasn’t matching anything.

 

Had to replace Replace li.Choice:last-of-type with li.Selection:last-of-type.

 

Everything else worked perfectly! 

Leave a Reply


Terms & Conditions