How can I adjust the height of text boxes/rows in side-by-side question? | XM Community
Skip to main content

Hi all,

 

I have a side by side question that looks as follows. It asks the reader to consider the text that is entered into a ‘locked’ text box, and answer two questions with reference to this text.

 

 

I wanted to amend the height of the text boxes so that they adjust to the length of the text - or at the very least, so that they are taller (i.e., as tall as the rows they occupy). Would this be possible? I imagine that this would involve some sort of javascript, however I am not too good in this respect, so any tips would be greatly appreciated!

 

Thanks in advance!

 

Juan

Use the below code in onReady function of SBS question:

	jQuery("#"+this.questionId+" .c4 .Essay").each(function(){
		jQuery(this).css({"height":jQuery(this).prop("scrollHeight")+"px","overflow":"hidden"});
	});

 

Hi @rondev 

 

Thanks for your suggestion. I have tried that but it does not seem to do anything… The below is how I have entered it into my onReady function - perhaps your code is being invalidated by something else?

 

Qualtrics.SurveyEngine.addOnReady(function()

{

    jQuery("#"+this.questionId+" .c4 .Essay").each(function(){

        jQuery(this).css({"height":jQuery(this).prop("scrollHeight")+"px","overflow":"hidden"});

    });

//jQuery("#"+this.questionId+" .Choice"+" input type='text']").css("text-align","left");

jQuery("#"+this.questionId+" .Choice"+" input type='text']").attr("readonly",true);

//jQuery("#"+this.questionId+" .Choice").css("height","10em");

//jQuery(".ChoiceStructure table").attr("cellspacing","100");

jQuery(".ProgressBarFill").css("width","40%");

jQuery("table.ProgressBarContainer tbody tr td:eq(0) label").text("Survey completion: 40%");

    

    const textarea = document.querySelectorAll('mtype=text]');

       const disabtextCSS = `

        background-color: #f0f0f0;

        color: #000000;

        cursor: not-allowed;

    `;


    textarea.forEach(area => {

       area.disabled = true;

        area.style.cssText = disabtextCSS;

    });

});

Leave a Reply


Terms & Conditions