Hello!
I am looking to change the layout of the drag and drop question so that my 'items' are stacked and centered at the top of the page and my 'drop boxes' are in columns below these items.
I have five drop boxes and they don't align easily across the page. By moving the items above, it should align well.
Any ideas?
Thanks!!
Page 1 / 1
Hi there, if you still need, I was able to put some code together that moves the Groups container into a newly created row beneath the Items container and also centers the items. First, create a Pick, Group, and Rank question that has "Add columns" enabled.
Then, update the question's JavaScript with the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
qid = this.questionId;
var lastrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table tr:last';
jQuery(lastrow).after('
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
qid = this.questionId;
var groupcont = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr > td.groupsContainerTd.BorderColor';
var newrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr:nth-child(2)';
jQuery(groupcont).detach().appendTo(newrow);
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Finally, add the below CSS to the Style section of the survey's Look & Feel. Adjust the minimum height of the Items container as needed based on the number of items.
.Skin .PGR .DragAndDrop td.itemsContainerTd {
min-height: 250px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
@media (max-width:480px) {
.Skin .PGR .DragAndDrop .Group h2 {
width: 100% !important;
}
.Skin .PGR .DragAndDrop .Group {
width: 50% !important;
}
.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li {
width: 85% !important;
}
}
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.