Other, please specify: -------------------------- | XM Community
Skip to main content

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 @harendra.kumar ,
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;
}

}

 


@Tom_1842 Code is working fine for the other boxes, but it is impacting the Metrix question look and feel. You can see the shadow box on scale and answer options. 

 


Hi @harendra.kumar ,
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 @qualtrics_nerd 


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

 


Leave a Reply