Rank and Sort Buckets all on one Line | XM Community
Solved

Rank and Sort Buckets all on one Line

  • 18 December 2017
  • 1 reply
  • 5 views

Userlevel 4
Badge +2
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!
icon

Best answer by AnthonyR 19 December 2017, 00:10

View original

1 reply

Userlevel 7
Badge +7
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;
}

Leave a Reply