HOW TO PLACE BORDERS AROUND EACH ITEM IN A DRAG AND DROP QUESTION | XM Community
Skip to main content
Solved

HOW TO PLACE BORDERS AROUND EACH ITEM IN A DRAG AND DROP QUESTION

  • February 5, 2021
  • 5 replies
  • 219 views
M
Forum|alt.badge.img

Hi,
Can anyone share the code I should use to place borders around each item in a drag and drop question? I am not using PGR, and I do not have rights to Javascript, so whatever is shared will probably need to be inserted in 'Custom CSS'. I'd also like to change the background color of the drag and drop items if possible. Thank you in advance for your help.

Best answer by ahmedA

You'll have to add display: block; and then you can specify the width of this block. With width: 120px;
For the background, you'll need to change it for the entire list item. You'll have to add the lines related to the list elements active and hover state.




    5 replies

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • February 5, 2021

    You can add this CSS to your question HTML.

    It should apply to most questions, even those that are not drag and drop. Therefore, a safer approach would be complete your QID (like QID13, you can find this when you download your data or renumber your questions).

    M
    Forum|alt.badge.img
    • MCC11201
    • Author
    • February 5, 2021

    Thank you so much. I'll give it a try. mc.

    M
    Forum|alt.badge.img
    • MCC11201
    • Author
    • February 5, 2021

    Hello. First, what you shared was extremely helpful and I could never have gotten there on my own. As sometimes happens, though, I didn't express myself well. Attached is a pic of the results of your code.
    What I'm trying to do is get a border around the entirety of item parameter of each item in the drag and drop question, not just the text. So, ideally, the red border would be around the grey color on item #1. And the same for #2 and #3, etc.
    Also, not to be too greedy, but can you possibly tell me the code to change the grey to a different color as well? THANK YOU!
    Rank Order Pic.png


    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • Answer
    • February 5, 2021

    You'll have to add display: block; and then you can specify the width of this block. With width: 120px;
    For the background, you'll need to change it for the entire list item. You'll have to add the lines related to the list elements active and hover state.




    M
    Forum|alt.badge.img
    • MCC11201
    • Author
    • February 5, 2021

    You're awesome. Thank you so much!

    Terms & ConditionsAccessibility statement