How can we apply the mobile layout of Matrix question to the web one? | XM Community
Skip to main content
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.

!
i 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.
hi @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.
You 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...
@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:

!
Add 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');

}



});
@TomG it worked as expected. Perfect!!! Thanks so much for the trick.
@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.
@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!
Thanks anyways @AnthonyR

Leave a Reply


Terms & Conditions