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:
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>