How to widen the questions column?

RashaRasha USACommunity Member Qubie ✭

How to widen the questions column?

Hi,

The statements' column is very narrow (first screenshot), when I try to increase it by dragging the column divider to the right, part of the

scale disappears— please see the second screenshot.

It seems that I need to change the stylesheet file. I used the following code but the problem was not resolved.

@media only screen and (min-width: 1200px) {

#Questions{min-width:95%;}

 #SkinContent{min-width:95%;}

}

note. I use % to avoid scaling the width on smart phones.


My question is how can I remove the right/left white spaces and widen the first column' content?

Thank you!




Best Answer

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    Accepted Answer

    Modify your CSS media rule to this:

    @media only screen and (min-width: 1200px) {
      .Skin .SkinInner{width:1200px;max-width:95%}
      #Questions{min-width:95%;}
      #SkinContent{min-width:95%;}
    }
    

Answers

  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭

    Use the below code in the onReady function of the matrix question (change the % as required)

    jQuery(".SkinInner").css("width","65%");
    
  • RashaRasha USACommunity Member Qubie ✭
    edited October 2020

    Thank you! But it does not work.

    Why the content sticks in the middle? I want to expand the area to see other items of 7 point Likert scale.

  • RashaRasha USACommunity Member Qubie ✭

    it works! Thank you.

  • Katherine ConradKatherine Conrad Community Member, XMPN Member Qubie ✭

    Hi @TomG I used your above advice (October 2020, modify CSS media) for the same kind of problem (survey was way too narrow, all centered with a lot of blank white space on both left and right). Your code advice above solved a huge part of my problem too (thanks!), but while now I have no blank white space to the left of all my matrix tables (I have over 300!), I do have a lot of open blank white space on the right side of the screen. The scale point statements in my columns are text wrapping several lines down. Any additional feedback aside? The idea of needing to manually adjust every column x 300+ questions seems time consuming. Thanks!

  • ahmedAahmedA IndiaCommunity Member Superuser ✭✭✭✭

    Add this line to your question JS:

    this.getChoiceContainer().querySelector("tr").children[0].style.width = "10%"

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    There is probably a CSS rule constraining your Matrix to a fixed maximum width. Use the Inspect feature of your browser to find it, then add a rule to your Look & Feel to override it making the maximum width 100%.

Sign In to Comment