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

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

  • 27 April 2021
  • 4 replies
  • 135 views
L

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!

icon

Best answer by faris 29 April 2021, 23:03

View original

4 replies

faris
Rank
Userlevel 2
Badge +3

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

L

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

faris
Rank
Userlevel 2
Badge +3

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


L

Hey @faris,
Thank you so much! This worked perfectly.

Leave a Reply


Terms & Conditions