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

Question

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!

faris · Accepted Answer

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

faris · Answer

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

Sign up

Login to the Community