Search code examples
javascripthtmlcsssizequaltrics

Qualtrics "Pick, Group, and Rank" group box heights


I've searched and seen Javascript or CSS codes to change the widths of text boxes and boxes in other types of Qualtrics questions (such as constant sum), but none of them seem to work for the Pick, Group, and Rank question.

I have a question that asks respondents to rank 20 different items, but we need the particular functionality/ look to be a drag and drop (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 each group for that type of question is too big, whereas we only need (and in fact, require) just one item per group.

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")? Right now, it's basically impossible for respondents to rank all the items, since dragging an item doesn't also make the screen scroll down.

Alternatively, if there's some other way to do this, any help would be greatly appreciated! The drag-and-drop functionality is non-negotiable I'm afraid. Thanks!


Solution

  • For anyone who may have this problem in the future, through extensive sleuthing and much trial-and-error, the following CSS snippet (which I placed at the bottom of the question text, in HTML mode) did the trick (the key part will be the min-height and height lines, of course):

    .Skin .PGR .DragAndDrop td.groupsContainerTd div > div {
        border: 1px solid;
        border-collapse: collapse;
        min-height: 20px;
        height: 50px;
    }