Adjust width of text within drag and drop box | Experience Community
Skip to main content
Solved

Adjust width of text within drag and drop box

  • April 6, 2020
  • 1 reply
  • 197 views
K

I need to widen the Drag & Drop boxes within a Pick, Sort, and Rank question type. I have successfully widened the box using the following code:
jQuery(".groupsContainerTd div>div,#QID32group0").css("width","400px")
However, this widens only the box and does not widen the text field, as shown in this screenshot:
image.pngIs there a way to widen the text field within the drag and drop boxes?
I have searched for an answer for this and it is unanswered in all threads I have come across: https://www.qualtrics.com/community/discussion/comment/5061#Comment_5061
https://www.qualtrics.com/community/discussion/1396/maximize-box-width-in-pick-group-and-rank
https://www.qualtrics.com/community/discussion/3536/how-to-align-the-text-to-the-box-size-as-shown-in-the-pic-below-any-help-would-be-appreciated

Best answer by kirbycai

I figured out how to do this using the CSS editor in Look & Feel using the following lines of code:
.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}

    1 reply

    K
    • kirbycai
    • Author
    • Answer
    • April 9, 2020

    I figured out how to do this using the CSS editor in Look & Feel using the following lines of code:
    .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}

    Terms & ConditionsAccessibility statement