Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Column width in an array

Column width in an array 2 years 1 month ago #86298

  • tuesday
  • tuesday's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
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>
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86378

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 years 1 month ago by tpartner.
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86481

  • tuesday
  • tuesday's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0

File Attachment:

File Name: limesurvey_survey_44832.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>
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86482

  • tuesday
  • tuesday's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
Oh, and no errors.
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86579

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
"Q1" should be the question ID, not the question code.

So, something like this:

Capture_2012-10-07.JPG
Cheers,
Tony Partner

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86972

  • tuesday
  • tuesday's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 13
  • Karma: 0
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.
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86982

  • kevinmark
  • kevinmark's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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: 2 years 1 month ago by kevinmark.
The administrator has disabled public write access.

Re: Column width in an array 2 years 1 month ago #86999

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Column width in an array 1 year 6 months ago #96400

  • StuTheQ
  • StuTheQ's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 26
  • Karma: 0
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: 1 year 6 months ago by StuTheQ.
The administrator has disabled public write access.

Re: Column width in an array 1 year 6 months ago #96401

  • tpartner
  • tpartner's Avatar
  • NOW ONLINE
  • LimeSurvey Team
  • Posts: 4372
  • Thank you received: 830
  • Karma: 381
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: StuTheQ
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.160 seconds
Donation Image