Reducing the white space between the columns in a Matrix text entry table type question | XM Community
Skip to main content
Michael_Cooksey
Administrator
8 days ago
Question

Reducing the white space between the columns in a Matrix text entry table type question

  • January 13, 2025
  • 2 replies
  • 53 views
K
Forum|alt.badge.img+1

I have a unique survey set up where I have 10 standardized medical terms (in column 1 of the matrix table as 10 statements and 1 extra statement as set up a other choice option) that I would like the survey participant to pick the best match to the local medical term (in the question field of the matrix table field).  The participant can pick 1 to 10 answers (Column 2, text entry, pick typing 1 - 10). See below image.  What I am struggling with is trying to format the table to move the text entry column closer to the statement column (not having any luck with this, tried several java scripts and CSS scripts and no luck so far).  Is there a CSS code or java script that can reduce the white space between the 2 colums or should I pick a different question type for this?

I currently have the Look and Feel, style, layout CSS coded as follows:

.Skin, .SkinInner {width:100vw !important;}
.Skin .QuestionOuter.Matrix{ max-width: 100vw; }

I have moved the column separater line in edit mode to the far right or left (causes my long statements to bunch) and this does not reduce the space beween the columns. 

I also found a Java script (Thank you TomG!!) that allows for putting a header above the statements, but this causes my statement column to narrow and my answer column to move further to the right, see picture below:

I am new to HTML and Java programming so any help would be greatly appreciated.

    2 replies

    N
    Level 2 ●●
    Forum|alt.badge.img+3

    Hi ​@KByer,

    Try using the below JS code, the gap would be reduced between column 1 and column 2 for a Matrix Text Entry question.
     

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

        // Select the table cells and header cells with the specified class
    let cells = document.querySelectorAll('.Skin .Matrix table td, .Skin .Matrix table th');

    // Loop through each element and apply the text-align property
    cells.forEach(function(cell) {
        cell.style.textAlign = 'left';
    });        
    });
     

    K
    Forum|alt.badge.img+1
    • KByer
    • Author
    • 2 replies
    • February 14, 2025

    Hi nikamshubham_73,

    Thank you for your reply!  I realized that depending on the  zoom and whether your browser is opened to the full page mode, this was causing the white space gap issue.  I will try the JS code too to see if this will adapt to keep the gap small when the browser is in full screen mode.

     

    Thank you!

     

    N
    1 person likes this
    • N
      nikamshubham_73

    Leave a Reply


    Terms & Conditions