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

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

  • 5 February 2021
  • 5 replies
  • 138 views

Userlevel 1
Badge

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.

icon

Best answer by ahmedA 5 February 2021, 21:44

View original

5 replies

Userlevel 7
Badge +21

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

Userlevel 1
Badge

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

Userlevel 1
Badge

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


Userlevel 7
Badge +21

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.




Userlevel 1
Badge

You're awesome. Thank you so much!

Leave a Reply