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!