How to increase the container width in matrix question to avoid horizontal scrolling | XM Community
Skip to main content

Hi ,
I have created a bipolar question with a 7 point scale. But the width of the container holding the question body does not increase automatically and the horizontal scroll bar seems to show up. I understand that to remove the scrollbar Javascript has to be used. But I am unable to identify the right class or code the script correctly. Was anyone able to solve this issue? Please let me know.

Sumeshsdn Could you provide a Preview Link to your survey?


Here -
https://uspta.qualtrics.com/jfe/preview/SV_08ms48M6OSfxUpL?Q_CHL=preview&Q_SurveyVersionID=current


For your theme, this should do the trick:
@media (min-width: 980px) {
    .Skin .SkinInner {
        display: table;
        max-width: 1200px;
    }
}


@media (min-width: 770px) {
    .Skin #SkinContent {
        max-width: 95%;
        width: unset;
    }
}


https://www.qualtrics.com/community/discussion/comment/36945#Comment_36945Thank you very much farmaly ! It worked perfectly!!


These recommendations alone above did not work. THis is what works for me.

 

In look and feel, CSS

/* Set the overall width to 85% and center the matrix */
.Skin, .SkinInner {
    width: 85% !important;
    margin: 0 auto !important;  /* This will center it */
}

/* Ensure the matrix is within the 85% width */
.Skin .QuestionOuter.Matrix {
    max-width: 85% !important;
    margin: 0 auto !important;  /* This will center it */
}

/* Optional: Adjust padding to ensure the content isn't too close to the edges */
.Skin .Matrix .ChoiceStructure td, 
.Skin .Matrix .ChoiceStructure th {
    padding: 10px !important;  /* Adjust as needed */
}

/* Expand matrix to full width */
.Skin .Matrix {
  width: 100% !important;
  max-width: 100% !important;
}

/* Adjust the spacing for the matrix rows */
.Skin .Matrix .ChoiceStructure td, 
.Skin .Matrix .ChoiceStructure th {
  padding: 10px; /* Adjust the padding as needed */
}

/* Make matrix container use full width */
.Skin .QuestionBody {
  width: 100% !important;
}
 


Leave a Reply