Solved
How can we apply the mobile layout of Matrix question to the web one?
I was trying to figure out if we can use the mobile layout (in the image attached) to be the web layout for matrix questions.
!
Best answer by TomG
@Taranmeet,
There is actually a very easy way to do this. Just make the label column bigger than your theme and it will happen automatically:
!
And you get this:
!
And you get this:
!
+43i think solution is to make drag drop type. else it will appear as matrix when screen size increase. or you can try lowering the pixel values and check if it works.
+21hi @Taranmeet ,
I think mobile layout used in the above attached image is from theme you used.
So if in case you have to use something similar to that layout then you have to use jquery, css or javascript.
+20You can give a try by applying the same CSS which applied for mobile device...
Preview the link and perform "inspect element" on mobile preview and then look for the CSS which get applied to the question and then try to apply the same CSS at question level.
I hope you have some knowledge of CSS...
+27@Taranmeet,
There is actually a very easy way to do this. Just make the label column bigger than your theme and it will happen automatically:
!
And you get this:
!
And you get this:
!
+7Add the following JS to the question you are trying to change this for :)
Qualtrics.SurveyEngine.addOnReady(function()
{
let element = this.questionContainer.querySelector(".QuestionBody");
if(element.classList.contains('desktop')){
element.classList.remove('desktop');
element.classList.add('mobile');
}
});
@AnthonyR it worked fine with the code as well, but it is always in expand mode, the arrows are not working in case we wish to collapse the options.
+7@Taranmeet
Hah, that is what I get for not testing thouroughly when I write code on the fly. Toms solution is the simpler and better one anyways!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.