- Posts: 2
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
customize size of free text field or make it expandable
- mbrown
- Topic Author
- Offline
- New Member
Less
More
1 year 4 months ago #233820
by mbrown
customize size of free text field or make it expandable was created by mbrown
Please help us help you and fill where relevant:
Your LimeSurvey version: Community edition 5.1.4
Own server or LimeSurvey hosting: own server
Survey theme/template: Fruity
==================
Hi everyone,
I have a customized array question with three columns: two selects and a free text field. The free text field is the third column.
Answers in the free text field may be 1 to 3 sentences long.
How can I make the size of the text field bigger or expandable?
If so, how would I add it to this code? Many thanks!!! --Mela
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Column specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert selects into column 1
if($('.answer-item.column-1 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="M">Product Portfolio Manager</option>\
<option value="Q">Application Manager</option>\
<option value="U">Application Enhancement Analyst</option>\
<option value="W">Project Manager</option>\
<option value="X">Other</option>\
</select>');
}
// Insert selects into column 2
if($('.answer-item.column-2 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-2', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="A">5 or more years</option>\
<option value="B">2 to 5 years</option>\
<option value="C">less than 2 years</option>\
</select>');
}
// Listeners on select elements
$('.inserted-select', thisQuestion).on('change', function(i) {
if($(this).val() != '') {
$(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('keyup');
}
else {
$(this).closest('.answer-item').find('input:text').val('').trigger('keyup');
}
});
// Returning to page
$('.with-select input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputText = $.trim($(this).val());
var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
$('select.inserted-select', thisCell).val(selectval);
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
});
</script>
Your LimeSurvey version: Community edition 5.1.4
Own server or LimeSurvey hosting: own server
Survey theme/template: Fruity
==================
Hi everyone,
I have a customized array question with three columns: two selects and a free text field. The free text field is the third column.
Answers in the free text field may be 1 to 3 sentences long.
How can I make the size of the text field bigger or expandable?
If so, how would I add it to this code? Many thanks!!! --Mela
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Column specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert selects into column 1
if($('.answer-item.column-1 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="M">Product Portfolio Manager</option>\
<option value="Q">Application Manager</option>\
<option value="U">Application Enhancement Analyst</option>\
<option value="W">Project Manager</option>\
<option value="X">Other</option>\
</select>');
}
// Insert selects into column 2
if($('.answer-item.column-2 .inserted-select', thisQuestion).length == 0) {
$('.answer-item.column-2', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Please choose...</option>\
<option value="A">5 or more years</option>\
<option value="B">2 to 5 years</option>\
<option value="C">less than 2 years</option>\
</select>');
}
// Listeners on select elements
$('.inserted-select', thisQuestion).on('change', function(i) {
if($(this).val() != '') {
$(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('keyup');
}
else {
$(this).closest('.answer-item').find('input:text').val('').trigger('keyup');
}
});
// Returning to page
$('.with-select input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputText = $.trim($(this).val());
var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val();
$('select.inserted-select', thisCell).val(selectval);
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
});
</script>
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 4 months ago #233821
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic customize size of free text field or make it expandable
Hi,
Add this script to get different sizes of your columns.
and this css
If you want to have a larger text input field there are solutions here with a button that opens a modal.
Just do a search for it.
Joffm
Add this script to get different sizes of your columns.
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Add a question class thisQuestion.addClass('custom-array'); // Column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('th, td', this).each(function(i) { $(this).addClass('colum-'+i); }); }); }); </script>
and this css
Code:
<style type="text/css">.custom-array table.subquestion-list col { width: auto !important; } .custom-array table.subquestion-list thead .colum-0 { width: 15%; } .custom-array table.subquestion-list thead .colum-1 { width: 20%; } .custom-array table.subquestion-list thead .colum-2 { width: 20%; } .custom-array table.subquestion-list thead .colum-3 { width: 45%; } </style>
If you want to have a larger text input field there are solutions here with a button that opens a modal.
Just do a search for it.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: mbrown
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10630
- Thank you received: 3696
1 year 4 months ago #233835
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic customize size of free text field or make it expandable
Denis has a question theme for textareas in an array -
gitlab.com/SondagesPro/QuestionTheme/arrayTextArea
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: mbrown
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 4 months ago - 1 year 4 months ago #233836
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic customize size of free text field or make it expandable
Here a thread that covers both your requrements
[url] forums.limesurvey.org/forum/can-i-do-thi...t-of-array-text-cell [/url]
@tpartner,
Searching the forum for this solution originally from @DenisChenu and @srauld I saw your post too late.
[url] forums.limesurvey.org/forum/can-i-do-thi...t-of-array-text-cell [/url]
@tpartner,
Searching the forum for this solution originally from @DenisChenu and @srauld I saw your post too late.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 year 4 months ago by Joffm.
The following user(s) said Thank You: mbrown
Please Log in to join the conversation.
- asilbering
- Offline
- Senior Member
Less
More
- Posts: 74
- Thank you received: 1
1 year 1 month ago #239989
by asilbering
Replied by asilbering on topic customize size of free text field or make it expandable
Limesurvey version: Version 3.28.43+221221 (limited access to advanced and theme configuration)
Hi all,
I have a text array question where the text field has been replaced by a "datepicker" in column 1. I am trying to use the solution described in this thread (and elsewhere) to modify the column widths without success, although I have already used this solution successfully before. Any ideas what am I doing wrong?
Thanks a lot for your help!!
Ana
This is the code I added to the source of the question:
I have also tried without defining the custom class with this code and didn't work either.
Hi all,
I have a text array question where the text field has been replaced by a "datepicker" in column 1. I am trying to use the solution described in this thread (and elsewhere) to modify the column widths without success, although I have already used this solution successfully before. Any ideas what am I doing wrong?
Thanks a lot for your help!!
Ana
This is the code I added to the source of the question:
Code:
<p><script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var rootPath = location.pathname.split('index.php')[0]; // Identify this question var thisQuestion = $('#question{QID}'); $('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />'); $.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js') .done(function(script, textStatus) { // Insert the date-time-pickers $('.answer-item:nth-child(2) input:text', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); $(this).addClass('date-control date datetimepicker') .wrap('<div id="datetimepicker_'+thisID+'" class="input-group date date-timepicker-group" />') .after('<div class="input-group-addon datetimepicker-addon btn btn-primary">\ <i class="fa fa-calendar" aria-hidden="true"></i><span class="sr-only"></span>\ </div>'); $('#datetimepicker_'+thisID+'').datetimepicker({ useCurrent:false, allowInputToggle: true, format: 'DD.MM.YYYY' }); }); }) .fail(function( jqxhr, settings, exception ) { console.log(exception); }); // Add a question class thisQuestion.addClass('custom-array'); // Column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('th, td', this).each(function(i) { $(this).addClass('column-'+i); }); }); </script></p> <style type="text/css">.custom-array table.subquestion-list col { width: auto !important; } .custom-array table.subquestion-list thead .column-0 { width: 10%; } .custom-array table.subquestion-list thead .column-1 { width: 20%; } .custom-array table.subquestion-list thead .column-2 { width: 60%; } .custom-array table.subquestion-list thead .column-3 { width: 10%; } </style>
I have also tried without defining the custom class with this code and didn't work either.
Code:
<p><script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var rootPath = location.pathname.split('index.php')[0]; // Identify this question var thisQuestion = $('#question{QID}'); $('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />'); $.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js') .done(function(script, textStatus) { // Insert the date-time-pickers $('.answer-item:nth-child(2) input:text', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); $(this).addClass('date-control date datetimepicker') .wrap('<div id="datetimepicker_'+thisID+'" class="input-group date date-timepicker-group" />') .after('<div class="input-group-addon datetimepicker-addon btn btn-primary">\ <i class="fa fa-calendar" aria-hidden="true"></i><span class="sr-only"></span>\ </div>'); $('#datetimepicker_'+thisID+'').datetimepicker({ useCurrent:false, allowInputToggle: true, format: 'DD.MM.YYYY' }); }); }) .fail(function( jqxhr, settings, exception ) { console.log(exception); }); // Remove existing column widths $('table.subquestion-list col:not(.col-hidden)', thisQuestion).css('width', ''); }); </script></p> <style type="text/css">table.subquestion-list thead .column-0 { width: 10%; } table.subquestion-list thead .column-1 { width: 20%; } table.subquestion-list thead .column-2 { width: 60%; } table.subquestion-list thead .column-3 { width: 10%; } </style>
Attachments:
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 1 month ago #239992
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic customize size of free text field or make it expandable
Hi,please do not provide lsq nor lsg exports, only lss.
But I do not see any issue using this script(s)
1. date picker
2. Customized column widths
3. The css
Joffm
But I do not see any issue using this script(s)
1. date picker
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var rootPath = location.pathname.split('index.php')[0]; // Identify this question var thisQuestion = $('#question{QID}'); $('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />'); $.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js') .done(function(script, textStatus) { // Insert the date-time-pickers $('.answer-item.answer_cell_X001 input:text', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); $(this).addClass('date-control date datetimepicker') .wrap('<div id="datetimepicker_'+thisID+'" class="input-group date date-timepicker-group" />') .after('<div class="input-group-addon datetimepicker-addon btn btn-primary">\ <i class="fa fa-calendar" aria-hidden="true"></i><span class="sr-only"></span>\ </div>'); $('#datetimepicker_'+thisID+'').datetimepicker({ useCurrent:true, allowInputToggle: true, format: 'DD.MM.YYYY' }); }); }) .fail(function( jqxhr, settings, exception ) { console.log(exception); }); }); </script>
2. Customized column widths
Code:
<script type="text/javascript"> $(document).ready(function(){ $(".datetimepicker").datetimepicker(); }); </script> <script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Add a question class thisQuestion.addClass('custom-array'); // Column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('th, td', this).each(function(i) { $(this).addClass('column-'+i); }); }); }); </script>
3. The css
Code:
<style type="text/css">.custom-array table.subquestion-list col { width: auto !important; } .custom-array table.subquestion-list thead .column-0 { width: 15%; } .custom-array table.subquestion-list thead .column-1 { width: 20%; } .custom-array table.subquestion-list thead .column-2 { width: 10%; } .custom-array table.subquestion-list thead .column-3 { width: 30%; } .custom-array table.subquestion-list thead .column-4 { width: 25%; } </style>
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12779
- Thank you received: 3940
1 year 1 month ago #239993
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic customize size of free text field or make it expandable
Small copy/paste typo
1 date picker
2. Customized column widths
css as before.
Joffm
1 date picker
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var rootPath = location.pathname.split('index.php')[0]; // Identify this question var thisQuestion = $('#question{QID}'); $('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />'); $.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js') .done(function(script, textStatus) { // Insert the date-time-pickers $('.answer-item.answer_cell_X001 input:text', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); $(this).addClass('date-control date datetimepicker') .wrap('<div id="datetimepicker_'+thisID+'" class="input-group date date-timepicker-group" />') .after('<div class="input-group-addon datetimepicker-addon btn btn-primary">\ <i class="fa fa-calendar" aria-hidden="true"></i><span class="sr-only"></span>\ </div>'); $('#datetimepicker_'+thisID+'').datetimepicker({ useCurrent:true, allowInputToggle: true, format: 'DD.MM.YYYY' }); }); }) .fail(function( jqxhr, settings, exception ) { console.log(exception); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $(".datetimepicker").datetimepicker(); }); </script>
2. Customized column widths
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Add a question class thisQuestion.addClass('custom-array'); // Column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('th, td', this).each(function(i) { $(this).addClass('column-'+i); }); }); }); </script>
css as before.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: asilbering
Please Log in to join the conversation.
- asilbering
- Offline
- Senior Member
Less
More
- Posts: 74
- Thank you received: 1
1 year 1 month ago #239995
by asilbering
Replied by asilbering on topic customize size of free text field or make it expandable
Thanks a lot! This works great! (and sorry about sending the wrong type of file).
I will take some time to compare the codes to see where was my problem.
Best regards,
Ana
I will take some time to compare the codes to see where was my problem.
Best regards,
Ana
Please Log in to join the conversation.