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

TOPIC: Add space between inputs

Add space between inputs 2 weeks 3 days ago #110873

  • danika
  • danika's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 46
  • 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: 2 weeks 3 days ago by danika.
The administrator has disabled public write access.

Add space between inputs 2 weeks 3 days ago #110887

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
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 2 weeks 3 days ago #110902

  • danika
  • danika's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 46
  • 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_group_3.lsg
File Size: 51 KB
The administrator has disabled public write access.

Add space between inputs 2 weeks 3 days ago #110903

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
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 2 weeks 3 days ago #110904

  • danika
  • danika's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 46
  • 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


ScreenShot.014-07-1412-50-09.png
Last Edit: 2 weeks 3 days ago by danika.
The administrator has disabled public write access.

Add space between inputs 2 weeks 2 days ago #110910

  • danika
  • danika's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 46
  • Karma: 0
Sample survey here.

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

Add space between inputs 1 week 6 days ago #110975

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
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%' });

Capture_2014-07-17.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.
Last Edit: 1 week 6 days ago by tpartner.
The administrator has disabled public write access.

Add space between inputs 1 week 3 days ago #111037

  • danika
  • danika's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 46
  • 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 week 3 days ago #111039

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4071
  • Thank you received: 748
  • Karma: 341
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 week 3 days ago #111040

  • danika
  • danika's Avatar
  • OFFLINE
  • Senior Lime
  • Posts: 46
  • 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.189 seconds
Donation Image