Question Styling: Text

You will be able to create custom styles using JavaScript and CSS in text questions.

NOTE: See the article: Adding JavaScript and/or CSS to your Question if you have not added JavaScript and/or CSS to a question

Align the input boxes closer to the labels:

Add the following to ADD CSS, adjusting the percentage to how much space you want the labels to take up.

.cm-text-label-container  { width: 15%; }

Control the sizing of the boxes:

Add the following to ADD CSS, replacing the 80 with whatever you wish the width of the box to be.

.cm-text-input {max-width: 80px;}

Allow text boxes to appear one at a time once you fill one out:

Add the following to the ADD JAVASCRIPT field of your specific question. In the first row you will need to add the question name as well as the number of boxes that show up by default. The rest will appear after the default ones have been filled in. 

OneRow("Q25","1"); /*<--- Update the first item to your question name and the second to the default number of boxes that should appear */
function OneRow (Qname, initialRows){
    if (!initialRows) {
        initialRows = 1
    }
    jQuery("div[data-qnum=" + Qname + "] input[type=text]:gt(" + (initialRows - 1) + ")").parents("li").hide();
    jQuery("div[data-qnum=" + Qname + "] input[type=text]").each(function(){
        if(jQuery(this).val() !== "") {
            jQuery(this).parents("li").next().show();
        }
    });
    jQuery("div[data-qnum=" + Qname + "] .cm-exclusiveResponse").change(function(){
        if(jQuery(this).prop("checked")){
            jQuery("div[data-qnum=" + Qname + "] input[type=text]:gt(0)").parents("li").hide();
        }
    })
    jQuery("div[data-qnum=" + Qname + "] input[type=text]").each(function(){
        jQuery(this).bind("change keyup input",function() {
            if (jQuery(this).val()!== ""){
                jQuery(this).parents("li").next().show();
            } else if (jQuery(this).parents("li").siblings().last().hasClass("cm-checkbox-dontknow")){
                jQuery(this).parents("li").nextUntil("div[data-qnum=" + Qname + "] li:last").hide().find("input[type=text]").val("");
            } else {
                jQuery(this).parents("li").nextAll().hide().find("input[type=text]").val("");
            }
        });
    });
}

Uncheck the 'Don't Know' box if text is entered

Click on the 'Add Javascript' button within the question and enter the following code

jQuery(".fieldset textarea").on("keyup keypress",function(){ if(jQuery(this).val()!="") 
jQuery(".fieldset .cm-exclusiveResponse").prop("checked",false) });