Dynamic Textbox

More
3 weeks 1 hour ago #175720 by Heinrich
Heinrich created the topic: Dynamic Textbox
Hi there,

if there any way to include a dynamic Textbox in limesurvey? The goal is that participants answer a question in a short Textbox. In case they need more characters than actually thought the Textbox should increase the size.

I'm aware of that multiple Textboxes exist, yet, I need the dynamic one because of academic purposes.

Thank you in advance.

Regards

Please Log in or Create an account to join the conversation.

More
2 weeks 6 days ago - 2 weeks 6 days ago #175721 by Joffm
Joffm replied the topic: Dynamic Textbox
Hi,
I do not knpw exactly what you mean by "dynamic textbox"

The database representation of a "short text" type is "text". This is: max. 65,535 charcters.
The HTML representation is "input". This is: one line of text.

So your respondnets can type a lot of text; but only in one line.

If you want a representation of more than one line you have to use: "long free text" or "huge free text", which have a handle in the lower right corner to resize them.
The database representation of these type also is "text". This is: max. 65,535 charcters.
So you do not have an advantage in max. characters in the database.
A few days ago there was a thread about this.

Of course, if you use "long" or "huge" free text you have to use a bit of css to have a look and feel like the multiple short text question-

Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last Edit: 2 weeks 6 days ago by Joffm.
The following user(s) said Thank You: Heinrich

Please Log in or Create an account to join the conversation.

More
2 weeks 6 days ago #175727 by Heinrich
Heinrich replied the topic: Dynamic Textbox
Hi,

thank you for your quick reply.

I'm aware of the short, long and huge free text. Also that both can include a maximum of 65,535 characters. However, what I would like to have is the following:

A short text inbox: Individuals start typing and as soon as they hit the end of the line, the textbox resizes such that they can always see the entire text they are typing. In other words: The textbox should increase in size every time the participant would enter a new line.

I do not need more characters. I guess that the maximum amount of characters will be something about 5000 - 10000. So the maximum will never be reached. I just want that the participants can also see the entire text even when only using a small textbox.

I hope I made my needs more understandable?

Thank you!

Please Log in or Create an account to join the conversation.

More
2 weeks 6 days ago #175731 by tpartner
tpartner replied the topic: Dynamic Textbox
To be truly dynamic, you will need to use a little JavaScript and CSS. See here for inspiration - codepen.io/vsync/pen/frudD

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
2 weeks 6 days ago #175735 by Heinrich
Heinrich replied the topic: Dynamic Textbox
Thank you! That's exactly what I need. Is there any guidance on how to implement something like that into Limesurvey?

Please Log in or Create an account to join the conversation.

More
2 weeks 6 days ago - 2 weeks 6 days ago #175763 by tpartner
tpartner replied the topic: Dynamic Textbox
1) Assign a CSS class "with-auto-expand" to a long-text type question.

1) Add this to your custom.js file:
$(document).on('ready pjax:scriptcomplete',function() {
 
	$('.with-auto-expand textarea').each(function(i) {
		handleTextAreaHeight(this);
	});
 
	$(document).on('keyup change', '.with-auto-expand textarea', function() {
		handleTextAreaHeight(this);
	});
 
	function handleTextAreaHeight(el) {
		$(el).css('min-height', 0);
		$(el).css('min-height', el.scrollHeight+'px');
	}
});

1) Add this to your custom.css file:
.with-auto-expand textarea {  
	box-sizing: padding-box;
	overflow: hidden;	
	resize: none;	
}

Here is a sample survey with that JS and CSS in the source of the first question.

File Attachment:

File Name: limesurvey...0-23.lss
File Size:16 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 2 weeks 6 days ago by tpartner.
The following user(s) said Thank You: LouisGac, Heinrich

Please Log in or Create an account to join the conversation.

More
2 weeks 5 days ago #175813 by Heinrich
Heinrich replied the topic: Dynamic Textbox
This is awesome! Thank you so much. Works like a charm!

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!