Setting Custom Width for The Elements in a Form by JQuery | XM Community
Skip to main content

I've made up a form like below. I need to set smaller the text boxes size and append different static text to the end of each text box. Meantimes, They're all in one line for "First Name" for example when previewed in mobile mode.
Thee label, textbox and static text should appear in one line in mobile mode.
E.g. in mobile mode, they shuld display like below.
First Name: David XXX
Last Name: White YYY
Note: XXX is static text for First Name, YYY is static text for Last Name

image.pngAny JQuery, CSS codes are welcome.
Thanks in advance.

You can resize these text boxes using the mouse also. I think the min width using that method is 60px.
For JS, you can use something like:
ib = this.getQuestionContainer().querySelectorAll("input");

ib.forEach(item => item.style.width = "30px");

Thank you for the suggestions. Since I need to append different static text after each text box and set various size for the elements as requested by the end user. How can I do it?
Regards.

ib = this.getQuestionContainer().querySelectorAll("input");
This line gives you all the input boxes in your question.
You can then references each of the boxes using the index. So, 

ib[0]
refers to the first box, 
ib[1]
to the second box and so on.
You can set the width of each box using 
ib[?].style.width = "??px"

Thank you for the scripts. It's good in display mode. However, ib[0].style.width = "30px", for example does not reflect its change on mobile mode.
Besides, I want to add static text after the textbox. I tried the following but both 30% and "CatA" do not relfect the change.
jQuery("#ib[0]").css("max-width","30%").after(" CatA");
Further advice is welcome.

I manage to add static text after the textboxes. The display has not changed for 30px in mobile mode
image.pngregards.

Try out the survey on a mobile, sometimes JS effects doesn't show up in the preview.

I just tried out the survey on a mobile, the problem of long textbox prevails even I set them to 30px/20px. Pls. see the attached screenshot. The scripts are listed below.
var ib = this.getQuestionContainer().querySelectorAll("input");
var ib0 = ib[0];
var ib1 = ib[1];
ib[0].style.width = "30px";
ib[1].style.width = "20px";
$(ib0).insert({after: ' per times'});
$(ib1).insert({after: ' serving'});

image.pngBest.

Sorry to provide the out-dated screenshot. Pls. refer to the latest as shown below
image.png

Leave a Reply


Terms & Conditions