I have a question related to look and feel of the survey. When I use “Flat” layout them Other specify box comes below that option, is there any way to adjust it in same row? Ex : Other title, Specify: ------------(In same row).
I have a question related to look and feel of the survey. When I use “Flat” layout them Other specify box comes below that option, is there any way to adjust it in same row? Ex : Other title, Specify: ------------(In same row).
Hi
You can add below code to the question and it will format the text box in the front:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var QID = this.questionId;
var QIDOtherLabel = jQuery("#" + QID).find(".TextEntryBox").siblings().attr("id");
jQuery("(id='" +QIDOtherLabel+"']").append(jQuery("#" + QID).find(".TextEntryBox"));
jQuery("(id='" +QIDOtherLabel+"']").css("padding-top","30px");
jQuery("(id='" +QIDOtherLabel+"']").css("padding-bottom","30px");
jQuery("#" + QID).find(".TextEntryBox").css("float","none");
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Hope this resolve your query!!
You can also try adding the below CSS to the Style section of the survey’s Look & Feel:
@media (min-width:480px) {
.LabelWrapper {
display:inline-flex;
background: rgba(0, 0, 0, 0.06);
}
.Skin label.MultipleAnswer, .Skin label.SingleAnswer {
background: rgba(0,0,0,0) !important;
}
.Skin input.TextEntryBox {
min-width: 65% !important;
}
}
Hi
You can add below code to the question and it will format the text box in the front:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var QID = this.questionId;
var QIDOtherLabel = jQuery("#" + QID).find(".TextEntryBox").siblings().attr("id");
jQuery("yid='" +QIDOtherLabel+"']").append(jQuery("#" + QID).find(".TextEntryBox"));
jQuery("yid='" +QIDOtherLabel+"']").css("padding-top","30px");
jQuery("yid='" +QIDOtherLabel+"']").css("padding-bottom","30px");
jQuery("#" + QID).find(".TextEntryBox").css("float","none");
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Hope this resolve your query!!
This working perfectly, thank you so much
In case you want to avoid formatting issues, I always prefer to show other open end box as a new open end question with in page display logic of if other is selected. This can also improve quality of response.
Putting CSS in the Style section of the Look & Feel will apply the CSS throughout the survey. To add the CSS to just a single question, you can specify the QID within the selector that the CSS should apply to, like in the below:
@media (min-width:480px) {
#QID1 .LabelWrapper {
display:inline-flex;
background: rgba(0, 0, 0, 0.06);
}
#QID1 .Skin label.MultipleAnswer, #QID1 .Skin label.SingleAnswer {
background: rgba(0,0,0,0) !important;
}
#QID1 .Skin input.TextEntryBox {
min-width: 65% !important;
}
}
Or to add the CSS to just a single page, the code can be included in the HTML of any question on that page within a style tag. Try using the Rich Content Editor's HTML/Source view "<>" to update the Question Text with the below:
<style type="text/css">
@media (min-width:480px) {
.LabelWrapper {
display:inline-flex;
background: rgba(0, 0, 0, 0.06);
}
.Skin label.MultipleAnswer, .Skin label.SingleAnswer {
background: rgba(0,0,0,0) !important;
}
.Skin input.TextEntryBox {
min-width: 65% !important;
}
}
</style>
Click to write the question text
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.