Labels and scale points in the mobile survey (smartphone version) | XM Community
Skip to main content

Hi experts!

I have this challenge, where I would like to view both Labels and scale points in the mobile survey (smartphone version) of a matrix question.
Attached is a screenshot with drawings of what I would like to have.
Thanks...
layut_adjustment.JPG

hi TadasN
You can insert the labels in scale points itself then it will show as you are looking for but both mobile and desktop version will be same.
image.png

A slicker solution is to leave your labels in place AND add the labels to the scale points inside a span with a class. For example:
1 - Strongly disagree
Add this css:
.mfLabel { display:none; }
.mobile .mfLabel { display:inline; }
It will look like this:
image.png

https://www.qualtrics.com/community/discussion/comment/31400#Comment_31400This is perfect Tom! Thank you so much.
I already use the 'reverse scale order' CSS, shown below.
How do I combine the two CSS codes into one? I just end up with CSS errors.

Qualtrics.SurveyEngine.addOnload(function() {
if(jQuery("#"+this.questionId+" .QuestionBody.mobile").length > 0) {
jQuery("#"+this.questionId+" tr.ChoiceRow").each(function() {
var label = jQuery(this).find("th");
jQuery(this).find("td").each(function(index) {
var choice = jQuery(this);
if(index > 0) {
label.after(choice);
if(choice.hasClass("last")) choice.removeClass("last");
}
else choice.addClass("last");
});
});
}
});

https://www.qualtrics.com/community/discussion/comment/31415#Comment_31415The thing you posted is JavaScript, not CSS. I think the two are compatible - you can use them both together.

Now I understand - and thanks, it worked like a charm. You are the boss!

Hey TomG ,
it works, thanks for that! But it looks a little bit weird when they have chosen one answer (see picture). Any possibility to fix it or do I have to live with it?

TadasN : Did it look the same in your case?
Output.PNG

TomG: I have change span class to div class. This seems to work. Do I need to be aware of any problems when I change it?

https://community.qualtrics.com/XMcommunity/discussion/comment/47789#Comment_47789The only difference between a

and
is that a div is a block element and a span isn't. This can be overridden with display:inline and display:block, respectively.

Hi there, I am trying to implement this on my survey but it’s not working. I considered starting a new thread, but since it’s pretty much exactly the same issue I thought I’d reply here.

I must be making a mistake somewhere but can’t see it. Here is my scale point, with an added span class for the label: 

And here is my custom CSS:

But looking at the mobile preview, I only see the scale point numbers and not the text:

Can anyone spot my error? Thank you so much for any insight!

It looks like you are using Simple layout, which has a different html structure.  Try replacing .mobile with .matrix-accordion.

BTW, tr.ChoiceRow formatting doesn’t apply to Simple layout either.

@TomG Thank you so much, this worked! I was really losing my mind trying to figure out the issue! The row formatting was a leftover from when I was using another layout, so I will remove that. Thanks again!

Leave a Reply


Terms & Conditions