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