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.
Solved
How to increase the container width in matrix question to avoid horizontal scrolling
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;
}
}
+3For 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;
}
1 person likes this
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.