Check out the LimeSurvey source code on GitHub!

Add space between inputs

More
2 years 7 months ago - 2 years 7 months ago #110873 by danika
Greetings,

I have a text array question with 5 columns, each with custom widths. However, the 2nd and 3rd columns have no little space in between. Is there a way to add space in between these fields? To accomplish the custom column widths, I used the following code:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {	
 
                ///////// REPLACE QQ WITH QUESTION ID //////////////
 
                //// FIRST HIDE SOME FIELDS ///
                $('input[name="435562X3X63SQ004_SQ004"]').attr('hidden', 'hidden');
 
		////////////// VARIABLE ARRAY COLUMN WIDTHS ////////////////////////////////////////////////////
 
		// Get rid of all the widths that the API imposes
		$( 'div#questionQQ table.question col' ).attr('width', '');
		$( 'div#questionQQ 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 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%
		// Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2)..... 
		$( 'div#questionQQ table.question tbody th:eq(0)' ).css({ 'width':'10%' }); // Answer text column
		$( 'div#questionQQ table.question tbody td:eq(0)' ).css({ 'width':'10%' }); // First answer column
		$( 'div#questionQQ table.question tbody td:eq(1)' ).css({ 'width':'10%' }); // Second answer column
		$( 'div#questionQQ table.question tbody td:eq(2)' ).css({ 'width':'60%' }); // Third answer column
                $( 'div#questionQQ table.question tbody td:eq(3)' ).css({ 'width':'10%' }); // Third answer column
 
		// Push the text input widths to 95% of their parent containers
		$( 'div#questionQQ table.question input[type="text"]' ).css({ 'width':'95%' });
 
		// Align the answer text
		$( 'div#questionQQ table.question tbody th' ).css({ 'text-align':'center' });
 
	});
</script>
Last Edit: 2 years 7 months ago by danika.

Please Log in to join the conversation.

More
2 years 7 months ago #110887 by tpartner
Can you activate a sample survey for us to see?

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
2 years 7 months ago #110902 by danika
It is a long survey, and I'm up against some deadlines. How about the question group instead, which I've attached here?

Thanks a lot.

Cheers

File Attachment:

File Name: limesurvey...up_3.lsg
File Size:51 KB
Attachments:

Please Log in to join the conversation.

More
2 years 7 months ago #110903 by tpartner
No, I'm sorry, I don't have time to recreate surveys for this forum.

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
2 years 7 months ago - 2 years 7 months ago #110904 by danika
Sorry. I'm still a newby at LS, and thought it was just a matter of loading it. Would a screenshot help? It shows the area of concern between columns 2 and 3.

Thanks


Attachments:
Last Edit: 2 years 7 months ago by danika.

Please Log in to join the conversation.

More
2 years 7 months ago - 2 years 7 months ago #110910 by danika
Sample survey here.

Spacing issues not as pronounced as on the actual. But, you can see them.
Last Edit: 2 years 7 months ago by danika.

Please Log in to join the conversation.

More
2 years 7 months ago - 2 years 7 months ago #110975 by tpartner
This is simply a function of the "95%" width applied to the inputs. The wider the table cell, the larger that remaining 5% is.

Try putting the input widths to 100% and adding some more padding to the cells.

		// Push the text input widths to 100% of their parent containers
		$('div#questionQQ table.question tbody td').css({ 'padding':'4px' });
		$('div#questionQQ table.question input[type="text"]').css({ 'width':'100%' });


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 2 years 7 months ago by tpartner.

Please Log in to join the conversation.

More
2 years 7 months ago #111037 by danika
Thanks, Tony. Would that not defeat the purpose though of IE compatibility? Seems like a trade off.

Regards

Please Log in to join the conversation.

More
2 years 7 months ago #111039 by tpartner
I don't understand. Did you test it in IE?

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
2 years 6 months ago #111040 by danika
I'm referring to a remark you included in the original code: "// NOTE: Keep this to 95% or less so IE will behave"

Please Log in to join the conversation.

More
2 years 6 months ago #111043 by tpartner
That's an old comment from the workaround that you found. I believe it refers to IE6 but you should test.

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
2 years 6 months ago #111046 by danika
Ok, will do. Thanks again.

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form