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

ankank Community Member - Trial User Qubie ✭

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

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

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    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.

Answers

  • ankank Community Member - Trial User Qubie ✭

    Thank you @TomG , it worked perfectly.
    Thanks,
    Ank

  • MAYA3MAYA3 Community Member Qubie ✭

    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.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    edited October 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

  • MAYA3MAYA3 Community Member Qubie ✭

    Thanks.
    When I'm trying to paste this JS on the question script, it writes the message attached below. What should I do?

  • MAYA3MAYA3 Community Member Qubie ✭
    edited October 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.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @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.

  • anhernananhernan Community Member Qubie ✭

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

    <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>
    

    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

  • anhernananhernan Community Member Qubie ✭

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

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    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/

  • anhernananhernan Community Member Qubie ✭

    @TomG Thank you so much!

  • jjvjjv Community Member - Trial User Qubie ✭

    @TomG 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!

Sign In to Comment