Column width in an array

More
5 years 2 weeks ago #86298 by tuesday
tuesday created the topic: Column width in an array
I'm trying to adjust the column width with the following work around, but I can't seem to get it to work. Nothing is changing. I'm using Version 1.92+ Build 120822. Here is the work around:

docs.limesurvey.org/tiki-index.php?page=...lumn_widths_in_array


Here is what I put in the source of the question, with question id Q1. I removed the onload function, since I read that it's no longer necessary, but I did try it that way first, exactly as written in the work around. What am I doing wrong?

<script>

jQuery(document).ready(function() {

// Get rid of all the widths that the API imposes
$( 'div#questionQ1 table.question col' ).attr('width', '');
$( 'div#questionQ1 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#questionQ1 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#questionQ1 table.question tbody th:eq(0)' ).css({ 'width':'60%' }); // Answer text column
$( 'div#questionQ1 table.question tbody td:eq(0)' ).css({ 'width':'20%' }); // First answer column
$( 'div#questionQ1 table.question tbody td:eq(1)' ).css({ 'width':'20%' }); // Second answer column

// Push the text input widths to 95% of their parent containers
$( 'div#questionQ1 table.question input[type="text"]' ).css({ 'width':'95%' });

// Align the answer text - feel free to experiment
$( 'div#questionQ1 table.question tbody th' ).css({'text-align':'center'});
});
</script>

Please Log in to join the conversation.

More
5 years 2 weeks ago - 5 years 2 weeks ago #86378 by tpartner
tpartner replied the topic: Column width in an array
I have just tested with the default template in 1.92 and it works as expected.

Are you getting any JS errors?

Can you attach a sample survey?

You should probably add a "type" attribute to the <script> tag:
<script type="text/javascript" charset="utf-8">

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 5 years 2 weeks ago by tpartner.

Please Log in to join the conversation.

More
5 years 1 week ago #86481 by tuesday
tuesday replied the topic: Column width in an array

File Attachment:

File Name: limesurvey...4832.lss
File Size:54 KB


Here is the survey. I did have the type attribute in there initially. I put it back in, but the columns still won't budge. Javascript is working, because this works:

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

alert("Test!");
});
</script>
Attachments:

Please Log in to join the conversation.

More
5 years 1 week ago #86482 by tuesday
tuesday replied the topic: Column width in an array
Oh, and no errors.

Please Log in to join the conversation.

More
5 years 1 week ago #86579 by tpartner
tpartner replied the topic: Column width in an array
"Q1" should be the question ID , not the question code.

So, something like this:


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

Please Log in to join the conversation.

More
4 years 11 months ago #86972 by tuesday
tuesday replied the topic: Column width in an array
Thanks! I knew it was something small like that :) It did work, but only in the default template. In the template I wanted to use, Clear Logo, it only worked in the question column. The answer columns stuck to their original widths, causing some columns to disappear of the edge of the page.

Please Log in to join the conversation.

More
4 years 11 months ago - 4 years 11 months ago #86982 by kevinmark
kevinmark replied the topic: Column width in an array
just try it <script type="text/javascript" charset="utf-8"> then following In the template Clear Logo, it only worked in the question column. The answer columns stuck to their original widths, causing some columns to disappear of the edge of the page.
Last Edit: 4 years 11 months ago by kevinmark.

Please Log in to join the conversation.

More
4 years 11 months ago #86999 by tpartner
tpartner replied the topic: Column width in an array

It did work, but only in the default template.

Most workarounds are developed for the default template and may need to be modified for other templates.

If using the Clear Logo template, try something like this:
<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>

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

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #96400 by StuTheQ
StuTheQ replied the topic: Column width in an array
Hello,

Can any kind soul please tell me why this doesn't work (even in the 'default' template and regardless of column widths (%) tried):

(workaround copied and pasted from manual.limesurvey.org/Workarounds:...#Variable_column_widths_in_array )
<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>
  • Survey 'Test (array)' [one question group, one question (array: four subquestions, three answers), file attached]
  • LimeSurvey 2.00+
  • JavaScript enabled (‘Alert’ echo = OK)
  • Template: default
Thank you all very much in advance!

Regards,

StuTheQ
Attachments:
Last Edit: 4 years 4 months ago by StuTheQ.

Please Log in to join the conversation.

More
4 years 4 months ago #96401 by tpartner
tpartner replied the topic: Column width in an array
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.

So, this line will throw a JavaScript error:
$( 'div#question198 table.question tbody th' ).css({'text-align':'center'});
It should be:
$( 'div#question198 table.question tbody th' ).css({ 'text-align':'center' });

The whole script, using {QID} to make it more portable is:
<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>

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

Please Log in to join the conversation.

More
4 years 4 months ago - 4 years 4 months ago #96438 by StuTheQ
StuTheQ replied the topic: Column width in an array
Dear Tony,

Thank you for helping me out yet again.

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.

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:

When I first copied and pasted the corrected script that you gave me, it didn't seem to modify the column widths as specified. I looked at the script carefully again and think that this line
// Align the answer text - feel free to experiment
		$( 'div#question{QID} table.question tbody th' ).css({'text-align':'center'});
doesn't contain the space after and before curly brackets that you referred to. I added the appropriate spaces and the script subsequently worked fine (but I'm not sure if this made a difference or not).

(By the way, I just replaced {QID} with the question ID; is {QID} a specific JavaScript function? :unsure: I Googled it but didn't really find a clear explanation)

I discovered that this script also works well with Array Dual Scales (with 'default' and 'basic' templates, at least), effectively making it possible to adjust the width of the separator column (it just requires a bit of playing around with the column width % until you get the array layout that you want). I'd already looked for this topic and found this post #94288 (Topic: array dual scale: change width of separator), which looked promising, but finally didn't seem to result in a clearcut workaround. I'm going to add a new post to this topic thread later because I'd like to see if there are also other workarounds possible (with CSS, perhaps).

Regards,

Stu
Last Edit: 4 years 4 months ago by StuTheQ.

Please Log in to join the conversation.

More
4 years 4 months ago #96459 by tpartner
tpartner replied the topic: Column width in an array

...is {QID} a specific JavaScript function?

{QID} is an Expression Manager variable that returns the question ID - manual.limesurvey.org/Expression_Manager#Access_to_Variables

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

Please Log in to join the conversation.

More
5 months 3 weeks ago #153045 by ConradNg
ConradNg replied the 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>

Please Log in to join the conversation.

More
5 months 3 weeks ago #153096 by tpartner
tpartner replied the 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)


<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

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now