Matrix table text entry wrapping text | XM Community
Skip to main content
Question

Matrix table text entry wrapping text

  • June 19, 2020
  • 6 replies
  • 571 views

Hello,
I have the following code to help me increase the matrix table text box height and width. I am looking for a way to text wrap. Can anyone help me with the code to help it wrap. I have tried various forms of break-word, overflow-wrap, wrap-word. I have not coding knowledge, I just use forums like this to find the code that I want.
Thank you,
Lori
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" input[type='text']").css("width","12em")
jQuery("#"+this.questionId+" input[type='text']").css("height","5em")

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 19, 2020

Input elements don't wrap. You need a textarea element instead of input type=text. You could add textareas and hide inputs with JS. Then have the JS copy/convert the textareas to the corresponding input elements.


  • Author
  • June 19, 2020

https://www.qualtrics.com/community/discussion/comment/26938#Comment_26938I am not sure how to do that. Can you explain a bit more?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 20, 2020

https://www.qualtrics.com/community/discussion/comment/26939#Comment_26939Everywhere there is an input, JS would add a textarea and hide the original input. Then when the page is submitted you would copy the contents of all the textareas into the inputs so they get recorded as responses.


  • December 11, 2020

Hi
did you managed to solve this? I don’t quite understand how to do this.


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • September 28, 2022

Hi there, if anyone still needs, I was able to follow TomG's recommendation and have put the below code together:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

jQuery("#"+this.questionId+" td input").each(function () {
       jQuery(this).hide();
       var txtarea = jQuery("