Larger text box in Side-by-side question in New Survey Taking Experience

Question

Hi,I have a side-by-side question, with in the first columns a 4-bullet-point question, and in the last column an open text field.I am using the New survey taking experience.I would like to make the open text field larger (both wider and higher). On desktop ànd on mobile.I also think to make it possible to make the text box larger, that also the wole survey width on the screen will need to be a it wider too.I have been looking to other topics on the community to css and javascript examples, but they don’t seem to be working on the side-by-side question and/or the new survey taking experience.Can anyone help me with the right code (either css or javascript) to make this possible?Thanks!

Tom_1842 · Accepted Answer

Hi, you can use the below CSS to make the SBS question take up the whole screen and make the text input take up 100% of the column width:/*full container simple layout*//*whole page*/#page #auto-advance-banner-container, #page #footer, #page #header-container, #page #logo-container, #page #survey-canvas { width: 100% !important;}/*text entries*/#app.no-mo-compo-layout .te .question-content .resize-wrapper, #app.no-mo-compo-layout .te .question-content input[type=text], #app.no-mo-compo-layout .te .question-content input[type=password], #app.no-mo-compo-layout .te .question-content textarea { width: 100% !important;}/*multiple choice*/.mc.horizontal .choices .choice, .mc.vertical .choices .choice { max-width: 100% !important;}/*textgraphics*/.question .question-display { max-width: 100% !important;}.grid-group .grid-cell-input .text-input { max-width: 100% !important;}While you could make the text input higher by adjusting the line-height with CSS, this won't make the text wrap, which I think is what you want. To do that, the elements needs to be replaced with

elements. Since Simple/NSTE layout uses React and I don't think SBS works with setChoiceValue(), the method mentioned in this thread can be used to set values to the text-inputs so that Qualtrics actually records them. Also, the elements change a bit between desktop and mobile, so some lines were added to use name (desktop) or id (mobile) depending on which is available. Try updating the SBS question's JavaScript with the below: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*/const inputs = this.getQuestionContainer().querySelectorAll('input.text-input');  inputs.forEach(input => {    // Use the input's name or id as a unique reference    const ref = input.name || input.id;    if (!ref) return;    // Assign the reference as the input's id if not already set    if (!input.id) {      input.id = ref;    }    // Hide the original input    input.style.display = 'none';    // Create a textarea    const textarea = document.createElement('textarea');    textarea.id = ref + '_textarea';    textarea.className = input.className;    textarea.name = ref + '_textarea';    textarea.setAttribute('aria-labelledby', input.getAttribute('aria-labelledby'));    textarea.setAttribute('tabindex', input.getAttribute('tabindex'));    textarea.rows = 4;    textarea.style.width = '100%';    // Pre-fill textarea with input value    textarea.value = input.value;    // Insert textarea before the hidden input    input.parentNode.insertBefore(textarea, input);  });});Qualtrics.SurveyEngine.addOnUnload(function(){/*Place your JavaScript here to run when the page is unloaded*/});Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {  function setNativeValue(element, value) {    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;    const prototype = Object.getPrototypeOf(element);    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;    if (valueSetter && valueSetter !== prototypeValueSetter) {      prototypeValueSetter.call(element, value);    } else if (valueSetter) {      valueSetter.call(element, value);    }  }  const inputs = this.getQuestionContainer().querySelectorAll('input.text-input');  inputs.forEach(input => {    const ref = input.name || input.id;    if (!ref) return;    const textarea = document.getElementById(ref + '_textarea');    if (textarea) {      setNativeValue(input, textarea.value);      input.dispatchEvent(new Event('input', { bubbles: true }));    }  });});

Tom_1842 · Answer

And I should add, I would think that at some pointchanging the text box size to "Essay" would make this text input a textarea, which is how it works for the other layouts, but not yet for the NSTE.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded