textbox layout on mobile and desktop version | XM Community
Skip to main content
Dear all,

I am trying to have the same layout for two side by side textfields in the mobile and text box version of my survey. In order to achieve this I have used the below JS code.



Question 1:



Qualtrics.SurveyEngine.addOnload(function()

{

jQuery(".Separator").hide();

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "hh");

jQuery("#" + this.questionId + " .InputText").focus(function(){

jQuery("#"+this.questionId+" .InputText").removeAttr("placeholder")})



});



Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery("input[type='text'").eq(0).after(jQuery("input[type='text'").eq(1));

jQuery("input[type='text'").eq(1).before(" : ");

jQuery("input[type='text'").eq(1).after(" Uhr");

jQuery("#"+this.questionId+" .InputText").css("cssText","width: 50px !important");



});



Question 2:



Qualtrics.SurveyEngine.addOnload(function()

{

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "mm");

jQuery("#" + this.questionId + " .InputText").focus(function(){

jQuery("#"+this.questionId+" .InputText").removeAttr("placeholder")})

});



Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery("#"+this.questionId+" .InputText").css("cssText","width: 50px !important");

});



The code works fine for the desktop version. !

but not for the mobile version: !



The problem seems to be an important statement in the mobile CSS. It would be great if anyone could help me with a technique of overwriting important statements with jQuery.



Thanks and best regards



Rudi
Be the first to reply!

Leave a Reply