How to adjust height and width in matrix table of text entry response boxes (not likert scale)?

Hi @researcher1 Below is the code to modify the size of text box of row 1 and column 3. Similarly identify the question ID  and answer choice ID of the required matrix question and replace in the below code.

Qualtrics.SurveyEngine.addOnReady(function () {
    // Get the text entry field element by its ID
    var textEntryField = document.getElementById("QR~QID12~1~3~TEXT");
    
    // Set the width, height, and font size of the text entry field
    textEntryField.style.width = "200px"; // Adjust the width as needed
    textEntryField.style.height = "30px"; // Adjust the height as needed
   });

Hi @omkarkewat thanks for sharing! Could you advise how I could adjust the code if I want to adjust all of the rows in the matrix table (not just row 1)? And would the code be added to Custom CSS or External CSS under Look and Feel? Thanks so much!

@researcher1 this code will work for the elements in column 3, assuming you have 3 elements in the column 3 . you can modify it for the other columns as well by following the template below.

Qualtrics.SurveyEngine.addOnReady(function () {
    // Get the text entry field elements by their IDs for rows 1, 2, and 3
    var textEntryFieldRow1 = document.getElementById("QR~QID12~1~3~TEXT");
    var textEntryFieldRow2 = document.getElementById("QR~QID12~2~3~TEXT");
    var textEntryFieldRow3 = document.getElementById("QR~QID12~3~3~TEXT");

    // Set the width, height, and font size of the text entry fields for each row
    textEntryFieldRow1.style.width = "200px"; // Adjust the width as needed
    textEntryFieldRow1.style.height = "30px"; // Adjust the height as needed

    textEntryFieldRow2.style.width = "200px"; // Adjust the width as needed
    textEntryFieldRow2.style.height = "30px"; // Adjust the height as needed

    textEntryFieldRow3.style.width = "200px"; // Adjust the width as needed
    textEntryFieldRow3.style.height = "30px"; // Adjust the height as needed
});

Here in “QR~QID12~1~3~TEXT”, replace QID12 with your targeted question ID and 1 represents row 1 while 3 represents row 3.

And no need to copy paste this in Custom CSS or External CSS under Look and Feel, paste this code in question itself.

On the left hand side of your question you will find an option to add Javascript, see image below.