I am creating a “pick, group, and rank” question for card sorting purposes in a Qualtrics survey. The problem we have is that the text items that people drag into the boxes do not automatically wrap so that they fit inside the box. Some of our text items are longer than others. We need the text for each item to wrap when necessary so that it does not extend outside the width of the box borders. Do we have to enter some type of additional css code for this? If so, we can’t figure out what will work. (I would think text wrapping inside the boxes would be standard practice for the text items that get dragged into the boxes, but Qualtrics does not seem to have this functionality built in.)
Page 1 / 1
Hello!
You should be able to use CSS here with Qualtrics' Look and Feel editor. So you'll need to jump from the Survey Builder to the Look and Feel tab on the left-hand side of the screen. Then click Style (under General) and enter the CSS code. Maybe something like this:
.box {
inline-size: 150px;
overflow-wrap: break-word;
}
Then back in your card-sorting question, you'll surround each of the choices with a div where class="box". Hopefully that helps!
Hi - Thanks so much for trying to help resolve this issue!
I tried your suggestion, but it did not work. After much testing, I have now narrowed down the problem to the fact that we have the items in the left pane (that we want people to drag over into the group boxes) as bullet-list items. We had made them be bullet list items because we were not able to get the items to appear in the left-pane list as left-justified text (even though we used the text editor to assign the left-justification attribute to every single item and the code for every single item states that it is left-justified - only some of the items would appear as left-justified when we previewed the survey. Some of the items remained centered, which is the default. The implementation of the left-justification format we applied seemed random. We could not figure out why the code indicates left-justified for all the items but the text for some of these items remains centered.) We also thought the bullets were more visually pleasing and helped to distinguish the items from each other.
What our testing shows is that if we make the items in the left pane be standard text (no longer having them be bullet-list items), the issue with text not wrapping inside the group boxes when you resize your browser window on a laptop/desktop goes away.
At this point, I am thinking that there are two defects that exist with this type of "pick, group, and rank" question in Qualtrics:
(1) If you make items in the left-hand pane be bullet-list items rather than leaving the items as standard text, the text will not always wrap appropriately when you drag an item to a group box and it could extend outside the right border of the group box if the text is lengthy.
(2) If you use the text editor (or edit the html code for an item) to "left-justify" the items in the left-hand pane rather than using their default "centered" format, the left-justified attribute is not consistently applied (some of your items will be left-justified, other items will ignore the left-justified setting). Having left-justification be successfully applied to items seems random when we preview the survey even if the code to left-justify has been entered for each item individually.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.