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

How to increase the container width in matrix question to avoid horizontal scrolling

  • April 27, 2021
  • 5 replies
  • 740 views
S
Level 1 ●
Forum|alt.badge.img+6

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.

Best answer by faris

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

    5 replies

    faris
    QPN Level 2 ●●
    Forum|alt.badge.img+3
    • faris
    • QPN Level 2 ●●
    • April 27, 2021

    Sumeshsdn Could you provide a Preview Link to your survey?

    S
    Level 1 ●
    Forum|alt.badge.img+6
    • Sumeshsdn
    • Author
    • Level 1 ●
    • April 28, 2021

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

    faris
    QPN Level 2 ●●
    Forum|alt.badge.img+3
    • faris
    • QPN Level 2 ●●
    • Answer
    • April 28, 2021

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

    S
    Level 1 ●
    Forum|alt.badge.img+6
    • Sumeshsdn
    • Author
    • Level 1 ●
    • April 29, 2021

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

    J
    Forum|alt.badge.img+1
    • jhop
    • September 19, 2024

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

      Terms & ConditionsAccessibility statement