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

TOPIC: Add space between inputs

Add space between inputs 1 year 1 month ago #110873

  • danika
  • danika's Avatar
  • Offline
  • Senior Lime
  • Posts: 49
  • Thank you received: 1
  • Karma: 0
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: 1 year 1 month ago by danika.
The administrator has disabled public write access.

Add space between inputs 1 year 1 month ago #110887

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5100
  • Thank you received: 1048
  • Karma: 440
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.

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

Add space between inputs 1 year 1 month ago #110902

  • danika
  • danika's Avatar
  • Offline
  • Senior Lime
  • Posts: 49
  • Thank you received: 1
  • Karma: 0
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

This message has an attachment file.
Please log in or register to see it.

The administrator has disabled public write access.

Add space between inputs 1 year 1 month ago #110903

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5100
  • Thank you received: 1048
  • Karma: 440
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.

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

Add space between inputs 1 year 1 month ago #110904

  • danika
  • danika's Avatar
  • Offline
  • Senior Lime
  • Posts: 49
  • Thank you received: 1
  • Karma: 0
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


This message has an attachment image.
Please log in or register to see it.

Last Edit: 1 year 1 month ago by danika.
The administrator has disabled public write access.

Add space between inputs 1 year 1 month ago #110910

  • danika
  • danika's Avatar
  • Offline
  • Senior Lime
  • Posts: 49
  • Thank you received: 1
  • Karma: 0
Sample survey here.

Spacing issues not as pronounced as on the actual. But, you can see them.
Last Edit: 1 year 1 month ago by danika.
The administrator has disabled public write access.

Add space between inputs 1 year 1 month ago #110975

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5100
  • Thank you received: 1048
  • Karma: 440
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%' });

This message has an attachment image.
Please log in or register to see it.

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: 1 year 1 month ago by tpartner.
The administrator has disabled public write access.

Add space between inputs 1 year 1 month ago #111037

  • danika
  • danika's Avatar
  • Offline
  • Senior Lime
  • Posts: 49
  • Thank you received: 1
  • Karma: 0
Thanks, Tony. Would that not defeat the purpose though of IE compatibility? Seems like a trade off.

Regards
The administrator has disabled public write access.

Add space between inputs 1 year 1 month ago #111039

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 5100
  • Thank you received: 1048
  • Karma: 440
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.

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

Add space between inputs 1 year 1 month ago #111040

  • danika
  • danika's Avatar
  • Offline
  • Senior Lime
  • Posts: 49
  • Thank you received: 1
  • Karma: 0
I'm referring to a remark you included in the original code: "// NOTE: Keep this to 95% or less so IE will behave"
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.168 seconds