Text Entry - Form with JS to add text: added text after box wraps around to next line on mobile | XM Community
Skip to main content
I have a text entry (form) question as I want my respondents to enter a percentage for four different things (4 form fields). I want to add a % sign after every box. I use the below code to add the % sign.



Qualtrics.SurveyEngine.addOnload(function()

{

var inputs = $(this.getQuestionContainer()).select('input[type="text"]');

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

$(input).insert({after: '%'});

}

});



While this looks fine on desktop, on the mobile preview, the percent symbol wraps around to the next line and looks pretty inelegant, like so:



!



Is there any way to make it so that the percent sign is after the text entry box and on the same line as the text entry box on mobile (or some other workaround is also ok)?



Thank you.
@kisobe Do you consider making the size of the text box smaller? Check out this topic
@MsIreen Thank you for the reply. This was helpful but unfortunately when I use the CSS for forms it only applies to the first text entry box in the form, and the rest are larger. Additionally, on mobile it doesn't seem to have any effect 😕



I will keep tinkering and try to figure it out though. Thank you!
Hello @kisobe ,



Paste the below code in the js(onReady) of the Text Entry Question



` jQuery(".Skin .TE .ControlContainer").css("white-space","nowrap");`
@Shashi Thank you, this is exactly what I was looking for!

Leave a Reply