Hello!
In the Pick, Group, and Rank category, I am doing a drag and drop question with 6 item graphics and 1 box. I would like the items to be configured horizontally instead of vertically, so that the participants do not have to scroll down through all 6 items graphics. Any idea on how to do this? Thanks!
Hey ldaniel1 ,
So it depends on the theme you're using. Would you be able to share the Preview Link with the question on the first page?
For my theme, I got it to be horizontal with the following CSS code:
html>body .Skin .PGR .DragAndDrop .Items>ul {
min-width: 600px; /*this expands the container so the pictures can fit horizontally */
}
.Skin .PGR .DragAndDrop .Items>ul>li {
display: inline-block;
}
.Skin .PGR .DragAndDrop .QuestionBody label {
display: inline-block;
}
.Skin .PGR .DragAndDrop div ul li span label img {
max-width: 70px; /*this limits the width of your images so they can fit horizontally*/
}
Thank you farmaly!
This is my preview link with the question on the first page.
Preview - Online Survey Software | Qualtrics Survey Solutions
ldaniel1
This should do it based on link you shared
/*table*/
.Skin .PGR .DragAndDrop .QuestionBody table {
width: 100%;
}
/*left div*/
.Skin .PGR .DragAndDrop .Items {
width: 550px;
}
/*left ul*/
html>body .Skin .PGR .DragAndDrop .Items>ul {
width: 100%;
}
/*left li - makes items line up*/
.Skin .PGR .DragAndDrop .Items>ul>li {
display: inline-block;
width: 100px!important;
padding: 5px!important;
}
/* right td*/
.Skin .PGR td.groupsContainerTd {
width: auto;
}
/*right ul*/
.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul,
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul {
width: auto;
}
/*right li - */
.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li {
width: 135px!important;
padding: 5px 5px 5px 40px!important;
}
/*text - makes text sit on top of image*/
.Skin .PGR .DragAndDrop .QuestionBody span.LabelWrapper label>span {
display: block;
}
/*images - limits image width so they will fit*/
.Skin .PGR .DragAndDrop div ul li span label img {
max-width: 90px; /*this limits the width of your images so they can fit horizontally*/
padding: 5px 0 0 0;
}
Hey @faris,
Thank you so much! This worked perfectly.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.