Maximize box width in pick, group and rank | XM Community
Skip to main content
Solved

Maximize box width in pick, group and rank

  • July 25, 2018
  • 9 replies
  • 997 views
Mirte
Hi there, I would like to have some (advanced) help with two issues. 1) We have a question in a survey that asks respondents to rank 50 statements (yes, quite a lot indeed). We use the pick, group and rank option. At the moment the boxes are quite narrow and I would like to maximize the width of the boxes. I red that it is possible to change the height and width of the boxes by entering a jQuery in the JavaScript. Unfortunately, I am not familiaar with computer language, nor have a feeling with it. Is anybody able to help me write the code? The boxes should remain flexible in it's length but maximized in their width to the available space(/width) within the framework of the survey. 2) I also have a question regarding the width of the full survey. I would like that the width of the survey's framework becomes somewhat larger. I assume that it is possible to write a code in the Look and Feel section? It would be really appreciated if somebody can help me with that too. I added a picture to visualize the two issues. Looking forward to your response!

Best answer by srane

I don't know if I am understanding your question correctly but I assume that you are trying to increase the width of all the pages of your survey. This can be done by going to Look and Feel -> Advanced Tab -> Add Custom CSS Code and then writing this line of code within: .Skin .SkinInner {width: 90%} The width percentage can be modified as per you needs.

    9 replies

    Mirte
    • Mirte
    • Author
    • July 25, 2018
    Hi there, I would like to have some (advanced) help with two issues. 1) We have a question in a survey that asks respondents to rank 50 statements (yes, quite a lot indeed!). We use the pick, group and rank option in Qualtrics. At the moment the boxes are quite narrow and I would like to maximize the width of the boxes. I red that it is possible to change the height and width of the boxes by entering a jQuery in the JavaScript. Unfortunately, I am not familiaar with computer language. Anybody able to help me writing the code? The boxes should remain flexible in it's length but maximized in their width. 2) The available width of the !
    S
    Level 1 ●
    Forum|alt.badge.img
    • srane
    • Level 1 ●
    • Answer
    • July 25, 2018
    I don't know if I am understanding your question correctly but I assume that you are trying to increase the width of all the pages of your survey. This can be done by going to Look and Feel -> Advanced Tab -> Add Custom CSS Code and then writing this line of code within: .Skin .SkinInner {width: 90%} The width percentage can be modified as per you needs.
    Mirte
    Mirte
    • Mirte
    • Author
    • July 25, 2018
    Thank you Scrane for your quick reply, I was able to change the width of the pages as you said I could do (which was my second question). Thank you for that.
    J
    • jbay005
    • October 7, 2018
    Hi - I have the same query and tried this code but it was unsuccessful. I also want my participants to download their responses for later use - the format in the pdf is terrible - does anyone know how to change this (before I run as fast as possible back to survey gizmo!) :( ! any help appreciated thanks
    K
    • kirbycai
    • April 9, 2020

    Here is what I found as a solution to issue #1:
    Using the CSS editor in the "Style" section of "Look & Feel":
    .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2,.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul{width:450px}
    .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div>div{width:450px}

    nlanda
    J
    • JNH
    • January 12, 2021

    Qualtrics Drag And Drop Question.JPGHi All, I have a similar question to above where we try to make above three columns (Mission critical, Nice to have, Less important) wider. I tried all codes suggested above but they did not work.
    Would anyone be able to help? My survey has multiple ones of these type of questions and we would need to change the layout for all of them.
    Thank you!

    C
    R
    Forum|alt.badge.img
    • rgbohner2
    • January 31, 2022

    I had this same problem. Here is the CSS that I had to change so the questions had enough width
    .Skin .PGR .DragAndDrop .Group ul, .Skin .PGR .DragAndDrop .Items h2, .Skin .PGR .DragAndDrop .Items ul {
      width: 590px;
    }

    .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2, .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul {
    width: 590px;
    }

    .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div>div {
      width: 590px;
    }

    .Skin .PGR .DragAndDrop .QuestionBody {
      width: 1200px;
    max-width:none;
    }

    .Skin .PGR .DragAndDrop .QuestionText {
    width: 1200px;
    max-width:none;
    }

    .Skin #SkinContent {
    max-width:100%;
    }

    .Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li {
      padding: 12px 2em 12px 46px;
    }

    nlanda
    Level 2 ●●
    Forum|alt.badge.img+8
    • nlanda
    • Level 2 ●●
    • August 4, 2022

    JNH How did you make your item boxes all the same size in the image you shared above? Anyone have the code for that?

    V
    Forum|alt.badge.img+1

    Facing a similar issue and was able to use the CSS provided by kirbycai to adjust the width of the pick, group, rank boxes.
    However, wondering if there is any way to span the data in each box across columns. E.g. if there are 12 items dragged in each box, can they show up as 2 columns within each box instead of one long list of 12? Perhaps after 6 are added, it auto drags to the next column, etc.?

    Terms & ConditionsAccessibility statement