Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Column width in an array

More
6 years 11 months ago #153045 by ConradNg
Replied by ConradNg on topic Column width in an array
Hi TParnter,

Is there a way to adapt this column width adjustment to a previously written script by you for a customized array. Namely, I need to decrease the column width for the dropdown lists in the array and increase the column width for the text boxes. I played around with the .css and was able to modified the button, select {} but I still was not able to modify the actual column width. How would I go about this? Can this be done within the script listed below?

Kind Regards,
Conrad



<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
var thisQuestion = $('#question{QID}');

// Assign column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('> *:gt(0)', this).each(function(i){
$(this).addClass('column-'+(i+1));
$(this).attr('data-column', i+1);
});
});

// Hide the text inputs in columns 2
$('.column-2 input[type="text"]', thisQuestion).hide();


// Define the select element (dropdown)
var select1 = '<select class="inserted-select"> \
<option value="">-- Please Choose --</option> \
<option value="Not for profit">Not for profit</option> \
<option value="Private sector">Private sector</option> \
<option value="Provincial Government">Provincial Government</option> \
<option value="Municipal government">Municipal government</option> \
<option value="Other Source (individual)">Other Source (individual)</option> \
</select>';

// Insert the select elements into column 2
$('.answer-item.column-2').append(select1);

// Initial dropdown values in column 2 (if the question has already been answered)
$('.answer-item.column-2 input[type="text"]').each(function(i){
if($.trim($(this).val()) != '') {
$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
}
});


// Hide the text inputs in columns 3
$('.column-3 input[type="text"]', thisQuestion).hide();

// Define the select element (dropdown)
var select1 = '<select class="inserted-select"> \
<option value="">-- Please Choose --</option> \
<option value="New donor/partner">New donor/partner</option> \
<option value="Existing donor/partner">Existing donor/partner</option> \
</select>';

// Insert the select elements into column 3
$('.answer-item.column-3').append(select1);

// Initial dropdown values in column 3 (if the question has already been answered)
$('.answer-item.column-3 input[type="text"]').each(function(i){
if($.trim($(this).val()) != '') {
$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
}
});


// Hide the text inputs in columns 6
$('.column-6 input[type="text"]', thisQuestion).hide();

// Define the select element (dropdown)
var select1 = '<select class="inserted-select"> \
<option value="">-- Please Choose --</option> \
<option value="Volunteer time">Volunteer time</option> \
<option value="Professional services">Professional services</option> \
<option value="Space / facilities">Space / facilities</option> \
<option value="Travel">Travel</option> \
<option value="Equipment / supplies">Equipment / supplies</option> \
<option value="Other">Other</option> \
</select>';

// Insert the select elements into column 6
$('.answer-item.column-6').append(select1);

// Initial dropdown values in column 6 (if the question has already been answered)
$('.answer-item.column-6 input[type="text"]').each(function(i){
if($.trim($(this).val()) != '') {
$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
}
});


// Hide the text inputs in columns 7
$('.column-7 input[type="text"]', thisQuestion).hide();

// Define the select element (dropdown)
var select1 = '<select class="inserted-select"> \
<option value="">-- Please Choose --</option> \
<option value="Agreement holder">Agreement Holder</option> \
<option value="Sub-agreement holder">Sub-Agreement Holder</option> \
<option value="Sub-sub-agreement holder">Sub-Sub-Agreement Holder</option> \
</select>';

// Insert the select elements into column 7
$('.answer-item.column-7').append(select1);

// Initial dropdown values in column 7 (if the question has already been answered)
$('.answer-item.column-7 input[type="text"]').each(function(i){
if($.trim($(this).val()) != '') {
$(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
}
});


// Listener on the dropdowns (insert selected values into hidden text input)
$('.inserted-select').change(function() {
var thisInput = $(this).closest('td').find('input[type="text"]');
$(thisInput).val($(this).val());
checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
});


});
</script></p>
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 11 months ago #153096 by tpartner
Replied by tpartner on topic Column width in an array
This will remove the widths imposed by LimeSurvey and add a "custom-dropdown-array" class to the table, allowing more freedom with CSS. (you will probably need to define both select and column widths with CSS)


Code:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Assign column-specific classes
    $('table.subquestion-list', thisQuestion).addClass('custom-dropdown-array');
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('> *:gt(0)', this).each(function(i){
        $(this).addClass('column-'+(i+1));
        $(this).attr('data-column', i+1);
      });
    });
 
    // Hide the text inputs in columns 2
    $('.column-2 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="Not for profit">Not for profit</option> \
              <option value="Private sector">Private sector</option> \
              <option value="Provincial Government">Provincial Government</option> \
              <option value="Municipal government">Municipal government</option> \
              <option value="Other Source (individual)">Other Source (individual)</option> \
            </select>';
 
    // Insert the select elements into column 2
    $('.answer-item.column-2').append(select1);
 
    // Initial dropdown values in column 2 (if the question has already been answered)
    $('.answer-item.column-2 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Hide the text inputs in columns 3
    $('.column-3 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="New donor/partner">New donor/partner</option> \
              <option value="Existing donor/partner">Existing donor/partner</option> \
            </select>';
 
    // Insert the select elements into column 3
    $('.answer-item.column-3').append(select1);
 
    // Initial dropdown values in column 3 (if the question has already been answered)
    $('.answer-item.column-3 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Hide the text inputs in columns 6
    $('.column-6 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="Volunteer time">Volunteer time</option> \
              <option value="Professional services">Professional services</option> \
              <option value="Space / facilities">Space / facilities</option> \
              <option value="Travel">Travel</option> \
              <option value="Equipment / supplies">Equipment / supplies</option> \
              <option value="Other">Other</option> \
            </select>';
 
    // Insert the select elements into column 6
    $('.answer-item.column-6').append(select1);
 
    // Initial dropdown values in column 6 (if the question has already been answered)
    $('.answer-item.column-6 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
 
    // Hide the text inputs in columns 7
    $('.column-7 input[type="text"]', thisQuestion).hide();
 
    // Define the select element (dropdown)
    var select1 = '<select class="inserted-select"> \
              <option value="">-- Please Choose --</option> \
              <option value="Agreement holder">Agreement Holder</option> \
              <option value="Sub-agreement holder">Sub-Agreement Holder</option> \
              <option value="Sub-sub-agreement holder">Sub-Sub-Agreement Holder</option> \
            </select>';
 
    // Insert the select elements into column 7
    $('.answer-item.column-7').append(select1);
 
    // Initial dropdown values in column 7 (if the question has already been answered)
    $('.answer-item.column-7 input[type="text"]').each(function(i){
      if($.trim($(this).val()) != '') {
        $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
      }
    });
 
    // Listener on the dropdowns (insert selected values into hidden text input)
    $('.inserted-select').change(function() {
      var thisInput = $(this).closest('td').find('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
    });
 
    // Remove existing column widths
    $('table.subquestion-list col:not(.col-hidden)', thisQuestion).css('width', '');
  });
</script>

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: ConradNg
The topic has been locked.
More
4 years 5 months ago #190372 by asilbering
Replied by asilbering on topic Column width in an array

tpartner wrote: (you will probably need to define both select and column widths with CSS)


Hi Tony,

how do I do this exactly? I have used your script to customize an array text question, and I would like to reduce the size of the column containing the dropdown menus. I have managed to reduce the size of column with the subquestion in the advanced options menu, but the rest of the space is split in half for the other columns (and of course the last line of your script disables this). I am using LS 3.19.

Do I need to add some CSS to the question source code? or do I need to define a new question class and change the template.css file? I tried inspecting the preview with the developer tools but I didn't get too far... so I would really appreciate it if you could point me in the right direction.

I truly appreciate your assistance, the support you are giving is really awesome and I cannot thank you enough!

Best regards,
Ana
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 5 months ago - 4 years 5 months ago #190373 by Joffm
Replied by Joffm on topic Column width in an array
Hi, Ana,

to set the column width, add some css styling in the question text like:
Code:
<style type="text/css">
table.subquestion-list thead .column-0 { width: 26%; }
table.subquestion-list thead .column-1 { width: 6%; }
table.subquestion-list thead .column-2 { width: 12%; }
table.subquestion-list thead .column-3 { width: 12%; }
table.subquestion-list thead .column-4 { width: 8%; }
table.subquestion-list thead .column-5 { width: 8%; }
table.subquestion-list thead .column-6 { width: 14%; }
table.subquestion-list thead .column-7 { width: 14%; }
</style>

Width should add up to 100%.

Taken from here:
www.limesurvey.org/forum/can-i-do-this-w...rvey?start=15#186378

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 5 months ago by Joffm.
The topic has been locked.
More
4 years 5 months ago #190386 by asilbering
Replied by asilbering on topic Column width in an array
Thanks a lot! That works great.

Best regards,

Ana
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose