Hey all -
I'm looking to create a rank and sort question, but want all of my scale points to live on the same line, rather than how it defaults (below).
!
Any idea of how to achieve this?
Thanks!
Page 1 / 1
I have done this with custom styling before, though I would caution that any amount more than 5 is overwhelming on desktop. And as always, this question type is garbage on mobile almost regardless of layout.
Add the following to your questions html.
<style>
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div{
display: inline-block;
width: 19%;
vertical-align: top;
}
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2, .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul, .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div>div{
width: 100%
}
</style>
I also recommend including the following to move items above your buckets.
.Skin .PGR .DragAndDrop td.groupsContainerTd, .Skin .PGR td.itemsContainerTd{
display: block;
}
Also note this uses the NO column layout!
Alternatively with a column layout adjust the width of each using the following until all fit ( still recommend moving items to be above your buckets):
.Skin .PGR .DragAndDrop .Group h2, .Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul{
width: 110px;
}
Add the following to your questions html.
<style>
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div{
display: inline-block;
width: 19%;
vertical-align: top;
}
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2, .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul, .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div>div{
width: 100%
}
</style>
I also recommend including the following to move items above your buckets.
.Skin .PGR .DragAndDrop td.groupsContainerTd, .Skin .PGR td.itemsContainerTd{
display: block;
}
Also note this uses the NO column layout!
Alternatively with a column layout adjust the width of each using the following until all fit ( still recommend moving items to be above your buckets):
.Skin .PGR .DragAndDrop .Group h2, .Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul{
width: 110px;
}
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.