- Posts: 9
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<script type="text/javascript" charset="utf-8">
Most workarounds are developed for the default template and may need to be modified for other templates.It did work, but only in the default template.
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Get rid of all the widths that the API imposes $( 'div#questionQQ .answer table.question col' ).attr('width', ''); $( 'div#questionQQ .answer table.question thead td' ).attr('width', ''); // Define a width for the question table so we can do so for its children // NOTE: Keep this to 95% or less so IE will behave $( 'div#questionQQ .answer table.question' ).attr('width', '95%'); // Define the column widths // Add or remove columns and adjust widths as necessary but widths should add up to 100% // NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2)..... $( 'div#questionQQ .answer table.question tbody th:eq(0)' ).css({ 'width':'60%' }); // Answer text column $( 'div#questionQQ .answer table.question tbody td:eq(0)' ).css({ 'width':'20%' }); // First answer column $( 'div#questionQQ .answer table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column // Push the text input widths to 95% of their parent containers $( 'div#questionQQ .answer table.question input[type="text"]' ).css({ 'width':'95%' }); // Align the answer text - feel free to experiment $( 'div#questionQQ .answer table.question tbody th' ).css({'text-align':'center'}); }); </script>
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Get rid of all the widths that the API imposes $( 'div#question198 table.question col' ).attr('width', ''); $( 'div#question198 table.question thead td' ).attr('width', ''); // Define a width for the question table so we can do so for its children // NOTE: Keep this to 95% or less so IE will behave $( 'div#question198 table.question' ).attr('width', '95%'); // Define the column widths // Add or remove columns and adjust widths as necessary but widths should add up to 100% // NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2)..... $( 'div#question198 table.question tbody th:eq(0)' ).css({ 'width':'20%' }); // Answer text column $( 'div#question198 table.question tbody td:eq(0)' ).css({ 'width':'25%' }); // First answer column $( 'div#question198 table.question tbody td:eq(1)' ).css({ 'width':'40%' }); // Second answer column $( 'div#question198 table.question tbody td:eq(2)' ).css({ 'width':'15%' }); // Third answer column // Push the text input widths to 95% of their parent containers $( 'div#question198 table.question input[type="text"]' ).css({ 'width':'95%' }); // Align the answer text - feel free to experiment $( 'div#question198 table.question tbody th' ).css({'text-align':'center'}); }); </script>
$( 'div#question198 table.question tbody th' ).css({'text-align':'center'});
$( 'div#question198 table.question tbody th' ).css({ 'text-align':'center' });
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Get rid of all the widths that the API imposes $( 'div#question{QID} table.question col' ).attr('width', ''); $( 'div#question{QID} table.question thead td' ).attr('width', ''); // Define a width for the question table so we can do so for its children // NOTE: Keep this to 95% or less so IE will behave $( 'div#question{QID} table.question' ).attr('width', '95%'); // Define the column widths // Add or remove columns and adjust widths as necessary but widths should add up to 100% // NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2)..... $( 'div#question{QID} table.question tbody th:eq(0)' ).css({ 'width':'20%' }); // Answer text column $( 'div#question{QID} table.question tbody td:eq(0)' ).css({ 'width':'25%' }); // First answer column $( 'div#question{QID} table.question tbody td:eq(1)' ).css({ 'width':'40%' }); // Second answer column $( 'div#question{QID} table.question tbody td:eq(2)' ).css({ 'width':'15%' }); // Third answer column // Push the text input widths to 95% of their parent containers $( 'div#question{QID} table.question input[type="text"]' ).css({ 'width':'95%' }); // Align the answer text - feel free to experiment $( 'div#question{QID} table.question tbody th' ).css({'text-align':'center'}); }); </script>
I'd come across that while rereading the manual after upgrading to LimeSurvey 2.00+ but, of course, hadn't realised that this was the problem here... :blush:Since the introduction of Expression Manager, you must leave a space after opening and before closing curly braces or the contents of the brace will be parsed by EM.
// Align the answer text - feel free to experiment $( 'div#question{QID} table.question tbody th' ).css({'text-align':'center'});
{QID} is an Expression Manager variable that returns the question ID - www.limesurvey.org/manual/Expression_Man...#Access_to_Variables...is {QID} a specific JavaScript function?
<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>
tpartner wrote: (you will probably need to define both select and column widths with CSS)