Javascript - how to resize the choice text size in a form type question? | XM Community
Skip to main content

Hello there, Please help me figure out how to edit the size of the choice text in a form type question. I know how to increase the vertical span of the text entry fields: jQuery("#"+this.questionId+" .InputText").css("width","50%");
But I am not sure how to increase the vertical span of the form fields text. Image below. How to resize the "click to write Form Field 1" to vertically span more of the page?
image.png

You said vertical, but width refers the horizontal size. Assuming you want to increase the width of the label column. It would be:
labelPercent = 50 //set to desired percentage width for label column
jQuery("#"+this.questionId+" .InputText").parent().css((100 - labelPercent)+"%");


https://www.qualtrics.com/community/discussion/comment/29486#Comment_29486Hi Tom, Thank you for your input. I actually wanted to increase the vertical size of the labels in a forms field. for instance, I want the labels "name:, emal address:" to span further than the crunched up space on the left. can you help? :)


You can use this CSS:
.Skin .TE .FORM table td { padding:30px 0px; }
Set 30px to whatever value meets your needs.


TomG :
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").css("width","60%");
});

Where do I add it to?


Where do I add it to?

Click on the cog to the left of the question and select "Add JavaScript"


Oh yes. that I figured. I meant where does this get inserted. I keep getting an error likeI am missing text or appending it to the wrong string.
.Skin .TE .FORM table td { padding:30px 0px; }


https://www.qualtrics.com/community/discussion/comment/29826#Comment_29826I wasn't sure what code you were referring to. The above is CSS, not JavaScript. To apply to all text entry forms in your survey you can add it to Look & Feel -> Style -> Custom CSS. For it to apply only to one question, add it inside a



Hello everyone,
I seem to face a similar challenge, only that I would like to minimize the label column, so that the text entry columns move further left - this is particularly relevant for the mobile view as you can see below:
image.pngI've tried out different code (html and JS) from the conversation above, but so far, none solved my challenge - am grateful for any support! :)


https://community.qualtrics.com/XMcommunity/discussion/comment/54833#Comment_54833Ah, I found a solution using different keywords to search for the challenge I had:
Left-Align "Form" Text Entry Question — XM Community (qualtrics.com)
Works perfectly with the code in this thread ;)


You said vertical, but width refers the horizontal size. Assuming you want to increase the width of the label column. It would be:
labelPercent = 50 //set to desired percentage width for label column
jQuery("#"+this.questionId+" .InputText").parent().css((100 - labelPercent)+"%");

I have a similar but slightly different question than Soumya, but it looks like this should address it. I do want to adjust the size of the labels - where it says “click to write Form Field 1”. However, when I input the suggested code, it doesn’t seem to do anything.

I don’t actually know JavaScript, so I’m just cutting and pasting. I’ve tried to make a few adjustments, but it doesn’t seem to help. I paste starting with jQuery and ending with “); I’ve tried replacing labelPercent with different numbers, and I’ve tried 100 - labelPercent = 50 or other numbers. I’ve also tried inserting numbers before the % in quotation marks.

Are you able to provide any help with this? Thank you!


@ZSmith - I suspect you are using simple layout, and if that’s the case the JS won’t work.


Leave a Reply