Pick, Group, and Rank Box Heights | XM Community
Skip to main content
We have a question in a survey that asks respondents to rank 20 different items, but we need the particular functionality/ look of the question to be a drag and drop specifically (not the Rank Order type though, as we need them to drag into different amounts of a money allocation), so the Pick, Group, and Rank question makes the most sense, using 20 groups. But the box for each of those groups for that type of question is too big, whereas we only need (and in fact, require) just one item per group. This is not only inconvenient but also makes answering the question virtually impossible, since the screen does not scroll down when one tries to drag an item down to a group far down the page.



Is there a way to adjust the height of these group boxes, so that they only fit one item in each (or at the very least are "shorter")?



Alternatively, if there's some other type of question or way to do this, any help would be greatly appreciated! The drag-and-drop functionality is non-negotiable I'm afraid. Thanks!
Here is the css that you need to change:



.Skin .PGR .DragAndDrop .Group h2 {

border-bottom: 2px solid #d2d2d6;

padding: 10px;

background: #f7f7f7;

}

So if you'd like to change the background color to black, and the font color to white, go to Look and Feel -> Advanced -> Add Custom CSS and then place the following:



.Skin .PGR .DragAndDrop .Group h2 {

border-bottom: 2px solid #d2d2d6;

padding: 10px;

background: #000000;

color:#ffffff;

}

This will change it throughout your survey.
Thanks very much for the help! I was actually trying to change the size of the containers where we drop the items in, but your suggestion pushed me in the right direction so I was able to figure it out with a bit more sleuthing. If anyone has the same question, I placed the following in the bottom of the question text, in HTML mode (where the key lines are of course the min-height and height):



<style>

.Skin .PGR .DragAndDrop td.groupsContainerTd div > div {

border: 1px solid;

border-collapse: collapse;

min-height: 20px;

height: 50px;

}

</style>

Leave a Reply