How to add label before/after text entry boxes

@eliasg13 Try to add this JavaScript to the question: 

Qualtrics.SurveyEngine.addOnload(function()
{
	jQuery("#"+this.questionId+" .InputText").css("width","95%").before("$ ");
	jQuery("#"+this.questionId+" .InputText").css("width","95%").after(" %");
})

If you only want to one of both, just remove the respective line in the code. The code reduces the width of the input so that the $ and % can be shown within the same line.

Or use this if a placeholder is also fine (adjust the $ in the code if you want to show another text as placeholder): 

Qualtrics.SurveyEngine.addOnload(function()
{
	jQuery("#"+this.questionId+" input[type='text']").attr("placeholder","$");
})

Please note that the described solutions will not work for simple layout.

Best
Christian

@chackbusch thank you for the fast reply!

When I copy and paste it into the specific question’s HTML view (shown below)

It seems to not be working, and instead just showing up in the question text:

This very well could be user error since I don’t know how to code. Do you know what I should be doing differently?

Thank you!

Elias

@eliasg13 You must add it as JavaScript:

Please also check my updated code. 

Best
Christian

@chackbusch 

Whoops, thank you!

I am now seeing the dollar sign, but it’s appearing above the question box rather than next to it:

Nevermind, using code from another thread I was able to figure it out!

Thank you for all your help Christian!

@eliasg13 I checked again and it seems like some standard styles overrule the width adjustment. Please adjust the code to: 

Qualtrics.SurveyEngine.addOnload(function() 
{
    // Get the input field ID
    var inputFieldSelector = "#" + this.questionId + " .InputText";

    // Create a custom style rule
    var customStyle = document.createElement('style');
    customStyle.type = 'text/css';
    customStyle.innerHTML = inputFieldSelector + ' { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; }';

    // Append the style rule to the document head
    document.head.appendChild(customStyle);

    // Wrap the input field with the dollar sign and percent sign
    jQuery(inputFieldSelector).wrap('<span style="white-space: nowrap;"></span>');

    // Add the dollar sign before the input field
    jQuery(inputFieldSelector).before("$ ");

    // Add the percent sign after the input field
    jQuery(inputFieldSelector).after(" %");
});

Please remove the respective lines at the end if you only need one of both ($ or %) for the input. 

Best
Christian