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...
Best answer by TomG
View original
+21
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.
+27
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:
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");
});
});
}
});
+27
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!
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?
+27
https://community.qualtrics.com/XMcommunity/discussion/comment/47789#Comment_47789The only difference between a
andis that a div is a block element and a span isn't. This can be overridden with display:inline and display:block, respectively.
+6
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!
+27
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.
+6
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
