Solved

In the Pick, Group, and Rank category, is there anyway of changing the items to horizontal?

Forum|Forum|4 years ago
April 27, 2021
4 replies
230 views

ldaniel1

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!

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;
}

+3

faris
QPN Level 2 ●●
Forum|Forum|4 years ago
April 27, 2021

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*/
}

Like

L

ldaniel1
Author
Forum|Forum|4 years ago
April 28, 2021

Thank you farmaly!
This is my preview link with the question on the first page.
Preview - Online Survey Software | Qualtrics Survey Solutions

Like

+3

faris
QPN Level 2 ●●
Answer
Forum|Forum|4 years ago
April 29, 2021

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;
}