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!
Solved
In the Pick, Group, and Rank category, is there anyway of changing the items to horizontal?
Best answer by faris
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;
}
+3Hey 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
+3ldaniel1
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;
}
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.