narrow matrix table | XM Community
Skip to main content

I have a matrix table with 6 short sub items and two response options (yes/no). This table is using all of the 700+ pixel width of the template, which means I have lots of white space between the columns in the table. If I adjust the width of the first column (by dragging the divider line) to as wide as makes sense given the content in the first column, there is still a ton of space between my yes and no columns because they are so wide. How can I get the yes/no response option columns closer together?
I think this will involve reducing the width of the underlying table. The following code, which I found in my search, reduces the width of the table to 500 px, but the now narrower table is centered and I need it positioned on the left similar to how other questions appear in my survey.
jQuery( '.ChoiceStructure' ).each(function () {
   this.style.setProperty( 'max-width', '500px', 'important');
   });
Is there a way to position it on the left by adding to the code above? Or is there a different solution I should be using?

Hi there, for your initial question, the entire matrix table can be aligned to the left side of the page by adding the below CSS to the Style section of the survey's Look & Feel:
div.Inner.BorderColor.Likert > div > fieldset > div > table {
margin-right: auto;
margin-left: 0px;
}
For using a matrix table to ask a series of Yes/No questions, you might also check out these other 2 implementations.
For the first option, create a Likert matrix question with 2 scale points and unselect Mobile Friendly. Then, add the below CSS to the Style section of the survey's Look & Feel. I found it in this thread, from Deepak.
.Skin .Matrix table td, .Skin .Matrix table th {
 width: -webkit-fill-available !important;
}
YesNo_Matrix1.pngFor the 2nd option, create a Profile matrix question with 2 scale points and unselect Mobile Friendly. Then, add the below CSS to the Style section of the survey's Look & Feel.
div.Inner.BorderColor.Profile > div > fieldset > div > table > tbody > tr:nth-child(1) > th {
width: 33%;
}

.Skin label.MultipleAnswer, .Skin label.MultipleAnswer.q-focused, .Skin label.SingleAnswer {
text-align: center;
}

.ChoiceRow td, .ChoiceRow th {
  border-bottom: 1px solid lightgray;
}
YesNo_Matrix2.png

Leave a Reply


Terms & Conditions