How can I get my labels to show and this formatting cleaned for a Bipolar Matrix Table | XM Community
Skip to main content

BinaryLabels.pngI have a binary matrix table that I need to be able to show on mobile. As you can see above, the mobile version is not pulling my column labels and it is also offsetting the 'Left' response where the 'Right' response is centered.
I'm assuming this is a JavaScript fix, but have no idea where to start.

As you've realized the 'Mobile friendly' version of a bipolar matrix is unusable. The only fix is to uncheck mobile friendly. Once you've done that it is possible to write JS to really make it mobile friendly.
I already have a JS function that does this that you might be interested in: mfBipolarMatrix.


michaelperri
The easiest way is to disable the Mobile friendly option and you should be good. Also remove padding, for your case the below code in Custom CSS should work fine.
@media (max-width: 767px){
.Skin .Matrix td.ColumnLabels tr.SpreadLabels td.First, .Skin .Matrix td.ColumnLabels tr.SpreadLabels th.First {
    text-align: center;
    padding: 1px;
}}

@media (max-width: 767px){
.Skin .Matrix table tr th.ColumnLabels, .Skin .Matrix table tr.ColumnLabelHeader td, .Skin .Matrix table tr.ColumnLabelHeader th, .Skin .Matrix table tr.ColumnLabels td {
    border-style: none;
text-align: center;
    padding: 1px;
}}
@media (max-width: 767px){
.Skin .Matrix .Bipolar tr.ChoiceRow td {
    padding: 0px;
}}
Preview:
image.png

Hope it helps!


Hi there, TomG's function is the closest to what you're looking for and Deepak's CSS should work too, but if having the scale labels inside the answer selections is acceptable, I was able to hack together 2 more alternatives. One follows TomG's recommendation of turning off Mobile Friendly and using JavaScript to adjust how the question displays and the other uses a function, also written by TomG, on an NPS question type since it remains horizontal on mobile.
BipolarFormatting2+NPS.png
Option 1: Using a Matrix Question where type = "Bipolar", unselect "Mobile Friendly" and select "Position Text Above Headers". Also in the Look & Feel, change the Answer Text to be "15". Then, in the question's JavaScript, add the below to the OnReady section. It is changing the radio buttons to be more like Multiple Choice buttons and adds text to be displayed within them. Also changes text to white when selected:
jQuery("#"+this.questionId+" label.q-radio").css({
"width":"100%",
"height":"100%",
"line-height":"100%",
    "cursor": "pointer",
    "transition": "background .2s ease-in-out",
    "padding": "4px",
    "display": "block",
    "text-align": "center",
    "-webkit-border-radius": "4px",
    "-moz-border-radius": "4px",
    "-ms-border-radius": "4px",
    "-o-border-radius": "4px",
    "border-radius": "4px"
});

this.questionclick = function(event,element)
  {
jQuery("#"+this.questionId+" label.q-radio").css("color","black");
     jQuery("#"+this.questionId+" label.q-radio.q-checked").css("color","white");
  }

jQuery("#"+this.questionId+" td:nth-child(1) > label").html("Agree Much More");
jQuery("#"+this.questionId+" td:nth-child(2) > label").html("Agree Somewhat More");
jQuery("#"+this.questionId+" td:nth-child(3) > label").html("Agree Somewhat More");
jQuery("#"+this.questionId+" td:nth-child(4) > label").html("Agree Much More");

Option 2: Using an NPS question, in the question's JavaScript, add the below to the OnReady Section. It hides NPS answer options and also sets text to be displayed within them:
//Market In View LLC
var scaleStart = 1; //Change - 0 or more and no greater than end
var scaleEnd = 4; //Change - 10 or less and no less than start

//No changes below
var width = 100/(scaleEnd - scaleStart + 1) + "%";
var q = jQuery("#"+this.questionId);
var cc = q.find('td.ControlContainer');
q.find('td.LabelContainer').each(function(index) {
if(indexscaleEnd) {
this.hide();
cc>index].hide();
}
else {
this.setAttribute('width', width);
cc'index].style.width = width;
}
});

jQuery("#"+this.questionId+"-1-label").html("Agree Much More");
jQuery("#"+this.questionId+"-2-label").html("Agree Somewhat More");
jQuery("#"+this.questionId+"-3-label").html("Agree Somewhat More");
jQuery("#"+this.questionId+"-4-label").html("Agree Much More");
Then, over in the Look & Feel, add the below CSS to the Style section to adjust the height and text display of the answer options:
.Skin .NPS label.SingleAnswer {
    min-height: 75px !important;
display: table-cell !important;
}


TomG, Tom_1842, Deepak - thanks for your help. I think I've got more than one viable solution. Thank you all for sharing your knowledge.


Thank you all TomG Deepak Tom_1842 for being thoughtful and providing solutions! You guys provide such great value to the community! 👏


Leave a Reply