How to add a vertical line before last column in a multiple choice question with horizontal layout? | XM Community
Skip to main content
Solved

How to add a vertical line before last column in a multiple choice question with horizontal layout?

  • September 9, 2019
  • 16 replies
  • 765 views

Forum|alt.badge.img+5
  • Level 1 ●
  • 22 replies
Hello Community, I have a multiple choice question with horizontal layout of the options. The last option is "Don't know". I want to add a vertical line before this option on the left side. I searched the internet and tried couple of options, but no success so far. Can anybody please help. Thanks, Ank

Best answer by TomG

Add this CSS to the question text: ``` <style> @media only screen and (min-width:481px) { td:last-of-type { border-left: 1px solid grey; } td:last-of-type label { margin-left:10px; } } </style> ``` Adjust border-left and margin-left properties as needed.

16 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • Answer
  • September 10, 2019
Add this CSS to the question text: ``` <style> @media only screen and (min-width:481px) { td:last-of-type { border-left: 1px solid grey; } td:last-of-type label { margin-left:10px; } } </style> ``` Adjust border-left and margin-left properties as needed.

Forum|alt.badge.img+5
  • Author
  • Level 1 ●
  • 22 replies
  • September 10, 2019
Thank you @TomG , it worked perfectly. Thanks, Ank

Forum|alt.badge.img
  • 4 replies
  • October 17, 2019
Thank you. Is there an option to do this vertical line, but just on one of my matrix questions in the survey? I don't want it to affect the other matrix questions.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • October 17, 2019
> @MAYA3 said: > Thank you. > Is there an option to do this vertical line, but just on one of my matrix questions in the survey? > I don't want it to affect the other matrix questions. Use this JS: https://gist.github.com/marketinview/cd5d385d8803124078a0

Forum|alt.badge.img
  • 4 replies
  • October 22, 2019
Thanks. When I'm trying to paste this JS on the question script, it writes the message attached below. What should I do?

Forum|alt.badge.img
  • 4 replies
  • October 27, 2019
Thanks!> @TomG said: > > @MAYA3 said: > > Thank you. > > Is there an option to do this vertical line, but just on one of my matrix questions in the survey? > > I don't want it to affect the other matrix questions. > > Use this JS: > https://gist.github.com/marketinview/cd5d385d8803124078a0 Hi, I will highly appreciate your help in solving it.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • October 28, 2019
> @MAYA3 said: > Thanks. > When I'm trying to paste this JS on the question script, it writes the message attached below. What should I do? That error is unrelated to the script. It appears you have an Internet connectivity issue.

  • 7 replies
  • April 18, 2020

Hi TomG, I am currently trying to add the line you provided:

it works perfectly! However, is there a way to modify, 1) the transparency of the line (I would like the line more faded out) and 2) a way to add the line before the last 3 response option of the question (instead of adding the line before the last response)? If you have any information, I would greatly appreciate it!

Ana


  • 7 replies
  • April 18, 2020

I'm sorry, in addition, is there a way to only add this to a singular multiple choice question?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • April 18, 2020

However, is there a way to modify, 1) the transparency of the line (I would like the line more faded out)

change the border style
and 2) a way to add the line before the last 3 response option of the question (instead of adding the line before the last response)?

use nth-child
in addition, is there a way to only add this to a singular multiple choice question?

make the selector specific to the question
https://www.w3schools.com/Css/


  • 7 replies
  • April 18, 2020

TomG Thank you so much!


  • 1 reply
  • June 9, 2020

Screen Shot 2020-06-09 at 10.58.00 AM.pngTomG Do you know how to fix this issue? The code worked and added the line for my I don't know column but it also added a line in the very front of my matrix. Thanks!


jpmorgan
Level 2 ●●
Forum|alt.badge.img+6
  • Level 2 ●●
  • 15 replies
  • August 9, 2020

https://www.qualtrics.com/community/discussion/comment/26446#Comment_26446same thing happens for me. bumping this again in case anyone know how to fix!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • August 9, 2020

https://www.qualtrics.com/community/discussion/comment/28816#Comment_28816You've combined the two different solutions on this thread: one for horizontal multiple choice and one for matrix. Remove the CSS that only applies to horizontal multiple choice from your matrix question.


Forum|alt.badge.img
  • 2 replies
  • November 4, 2023

Screen Shot 2020-06-09 at 10.58.00 AM.pngTomG Do you know how to fix this issue? The code worked and added the line for my I don't know column but it also added a line in the very front of my matrix. Thanks!

Screen Shot 2020-06-09 at 10.58.00 AM.pngTomG Do you know how to fix this issue? The code worked and added the line for my I don't know column but it also added a line in the very front of my matrix. Thanks!

Hi, did you fix this? I have the same issue, but I did not figure out. 


Forum|alt.badge.img
  • 2 replies
  • November 4, 2023

Hi, I have the same issue. I added in the html under the question text.

<style>
@media only screen and (min-width:481px) {
td:last-of-type { border-left: 1px solid grey; }
td:last-of-type label { margin-left:10px; }
}
</style>

I see the line to the very left of my matrix, which is unwanted. What language should I add in html to remove? Thanks!