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

Javascript - how to resize the choice text size in a form type question?

  • August 24, 2020
  • 11 replies
  • 911 views

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

Best answer by TomG

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


11 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • August 24, 2020

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)+"%");


  • Author
  • 3 replies
  • August 27, 2020

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? :)


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • August 27, 2020

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


  • Author
  • 3 replies
  • September 1, 2020

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

Where do I add it to?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • September 1, 2020

Where do I add it to?

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


  • Author
  • 3 replies
  • September 1, 2020

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; }


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • Answer
  • September 1, 2020

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



Forum|alt.badge.img+1
  • 2 replies
  • January 31, 2023

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! :)


Forum|alt.badge.img+1
  • 2 replies
  • January 31, 2023

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 ;)


Forum|alt.badge.img
  • 2 replies
  • September 14, 2023

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!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • September 14, 2023

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