Drag and drop custom code needed | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Drag and drop custom code needed

  • Aug 15, 2018 7:49 PM UTC
  • 6 replies
  • 167 views
I need to widen the width of the answer item column in a standard drag and drop question in a survey. This is no option for this in the rich text editor. Qualtrics support suggested I could do this with custom code, but they could not help. they suggested I contact this community. Could anyone provide guidance on how to do this?

Best answer by Anonymous

Hello @Carla , Paste the following code in the js(onready) option of the drag and drop question. `jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("width","100%");` See the output! Note: Though this code results in wide answer box in drag and drop. But the text(item) will only be present in the small box(i.e of previous size).
View original

6 replies

  • Anonymous
  • Answer
  • Aug 16, 2018 4:04 AM UTC
Hello @Carla , Paste the following code in the js(onready) option of the drag and drop question. `jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("width","100%");` See the output! Note: Though this code results in wide answer box in drag and drop. But the text(item) will only be present in the small box(i.e of previous size).
    JenF
    Level 2 ●●
    Forum|alt.badge.img+9
    • JenF
    • Level 2 ●●
    • Sep 20, 2018 6:17 PM UTC
    > @Shashi Can I change the height of the box in the drag and drop question type using a similar method? I would like them to be about 25% of the current size. Thank you, Jen
    • Anonymous
    • Sep 20, 2018 6:36 PM UTC
    > @JenF said: > > @Shashi > > Can I change the height of the box in the drag and drop question type using a similar method? I would like them to be about 25% of the current size. > > Thank you, > Jen > Use the following code in js(onready): `jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("height","25px");`
    JenF
    Level 2 ●●
    Forum|alt.badge.img+9
    • JenF
    • Level 2 ●●
    • Sep 20, 2018 7:57 PM UTC
    > @Shashi said: > > @JenF said: > > > @Shashi > > > > Can I change the height of the box in the drag and drop question type using a similar method? I would like them to be about 25% of the current size. > > > > Thank you, > > Jen > > > > Use the following code in js(onready): > `jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("height","25px");` I tried this, but I must be doing something wrong. Do I use this exactly as you have it shown jQuery("#"+ this.questionId+" td.groupsContainerTd > div > div ").css("height","25px"); or do I need to pull in my specific Id for instance. I am not a coder so this may sound silly to you. thank you.
    As a follow-up to this: is it possible to change the size of the text(item) box as well? I have items that contain multiple words so it gets very unwieldy if you have multiple items in boxes with a small width.
      • kirbycai
      • Apr 9, 2020 8:28 PM UTC

      For anyone searching this later as I was, here is code that worked for me 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}

      Terms & ConditionsAccessibility statement