Move text entry field | XM Community
Solved

Move text entry field

  • 7 September 2018
  • 13 replies
  • 438 views

Hello everyone,

I'm working in a multiple choice question. There is a "others" choice at the end with an additional text entry field. I would like to know if it is possible to move the text entry field next to the "others" button, so that it's in one line.
Many thanks in advance for your help!
!
icon

Best answer by MohammedAli_Rajapkar 7 September 2018, 20:50

View original

13 replies

Userlevel 4
Badge +3
@Melissa, Yes, it is possible. Just click on other, you will see a drop down. From the drop down option select "Allow Text Entry." Please also find the screenshot attached. Hope this helps.

!
Thanks for the quick answer. Apparently my question was misleading. I was wondering if it is possible to change the position of the text entry field. When I check the preview of the survey, the text entry field appears underneath the box "Andere". So is it possible to change the position of the text entry field, so that it appears right beside "Andere"?
I attached a screenshot to my original post.
Userlevel 7
Badge +20
Here is the demo link:
https://qimpl.az1.qualtrics.com/jfe/preview/SV_1RqO5Wzvc6QLdB3?Q_SurveyVersionID=current&Q_CHL=preview

This work for one other specify box...

add below code in JavaScript (OnReady Function)

var QID = this.questionId;
var QIDOtherLabel = jQuery("#" + QID).find(".TextEntryBox").siblings().attr("id");
jQuery("[id='" +QIDOtherLabel+"']").append(jQuery("#" + QID).find(".TextEntryBox"));
jQuery("[id='" +QIDOtherLabel+"']").css("padding-top","30px");
jQuery("[id='" +QIDOtherLabel+"']").css("padding-bottom","30px");
jQuery("#" + QID).find(".TextEntryBox").css("float","none");
@Mohammedali_Rajapakar_Ugam Great, thanks!
Related to this question: is there a way to increase the space between the option label and the text entry field? In a multiple choice question, I have "Other" with a text field beside it, and the text field is jammed up against the word "Other" without any spacing. I see "padding-left" did not work. Is there something like "padding-between" that achieves this?
Userlevel 7
Badge +20
Try adding space after "Other "
Thanks for suggestion--that does not work, unfortunately.
Userlevel 7
Badge +20
Can you share a screen-shot?
Now the space is working. I think it was a bug or something hadn't updated properly. Thank you @Mohammmedali_Rajapakar_Ugam
Badge +3
@Mohammedali_Rajapakar_Ugam Thanks for sharing this answer! I need the same thing, but want to have the Question show first, then the text entry to the right of the question. The above JS code from above displays text entry box first then the question. How can I switch that positioning?
@Mohammedali_Rajapakar_Ugam Related to your answer from the 8th of Oct: Is there a way to adapt the code so it works also for a multiple choice question with two other specify boxes?

At the moment it looks like this:

!
> @Melissa said:
> @Mohammedali_Rajapakar_Ugam Related to your answer from the 8th of Oct: Is there a way to adapt the code so it works also for a multiple choice question with two other specify boxes?
>
> At the moment it looks like this:
>
> !
>

I also would like to know how to adapt the code so it applies to every instance of 'text box entry' in a single questions instead of just the first instance of 'text box entry'. Any guidance would be greatly appreciated!
Badge +2

> @Melissa said:
> @Mohammedali_Rajapakar_Ugam Related to your answer from the 8th of Oct: Is there a way to adapt the code so it works also for a multiple choice question with two other specify boxes?
>
> At the moment it looks like this:
>
> !3r_oyzvpj8bif1w.png
>

I also would like to know how to adapt the code so it applies to every instance of 'text box entry' in a single questions instead of just the first instance of 'text box entry'. Any guidance would be greatly appreciated!

I used this code and it worked!

 

Qualtrics.SurveyEngine.addOnload(function() {

  jQuery("#"+this.questionId+" .TextEntryBox").each(function() {

      var tb = jQuery(this);

      tb.css({"float":"none","background-color":"white","width":"100%"});

      tb.prev("label").css("display","block").append(" ").append(tb);

  });

});

Leave a Reply