Box size for pick, group & rank question | XM Community
Skip to main content

Hello
I have a pick, group & rank question with 5 boxes. The questions works as expected but the boxes are huge. I need boxes about half the current size. Is there a way to adjust the size of the box? Currently, this one question consumes close to a page simply because of the box sizes.
I have CSS code for a form field question already so I can't override that code.
Thank you!

Hi there, I was able to get this to look okay on my end by first enabling "Add columns" for the PGR question under "Groups" in the Survey Builder. Then, I added the below CSS to the Custom CSS of the Style section in the survey's Look & Feel:
@media (min-width:480px) {

.Skin .PGR .DragAndDrop .Group h2 {
    width: 100% !important;
}

.Skin .PGR .DragAndDrop .Group {
    width: 33% !important;
}

}
Adjust the Group width as needed.
PGR_GroupSizing.png

Thank you! Columns is much better and achieves the export data as I want.
I tried the code but it didn't do anything. I am wondering if that's because I already have some code there? here is all of the code I have now for CSS.

.Skin label.MultipleAnswer, .Skin label.MultipleAnswer.q-focused, .Skin label.SingleAnswer {
padding: 10px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
text-align: left;
background: #ffffff;
padding-right: 15px;

.Skin .PGR .DragAndDrop .Group h2 {
  width: 100% !important;
}
.Skin .PGR .DragAndDrop .Group {
  width: 33% !important;
}

}

CLM Glad to hear! Looks like you are missing a bracket, try pasting the below into your Custom CSS section:
.Skin label.MultipleAnswer, .Skin label.MultipleAnswer.q-focused, .Skin label.SingleAnswer {
padding: 10px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
text-align: left;
background: #ffffff;
padding-right: 15px;
}



@media (min-width:480px) {

.Skin .PGR .DragAndDrop .Group h2 {
    width: 100% !important;
}

.Skin .PGR .DragAndDrop .Group {
    width: 33% !important;
}

}

Ok that did the trick for the width!
Is there a way to reduce the height? There is a lot of blank space in the boxes that I don't need. It looks odd to have all of the space.

CLM Try the below:
@media (min-width:480px) {

.Skin .PGR .DragAndDrop .Group {
    width: 33% !important;
}

}

.Skin .PGR .DragAndDrop .Group h2 {
    width: 100% !important;
}

.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul {
    min-height: 20px !important;
}

Great-thank you so much!

Leave a Reply


Terms & Conditions