Welcome, Guest
Username: Password: Remember me

TOPIC: Possible to style a specific answer column?

Possible to style a specific answer column? 2 years 4 months ago #94620

  • smiit
  • smiit's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
I have an array question with 6 answer columns.

Is it possible to use CSS styling to modify only the 1st column?

I want to draw a border around it and add shading but leave the remaining 5 columns to the right of it unaffected.

Thanks.
The administrator has disabled public write access.

Possible to style a specific answer column? 2 years 4 months ago #94637

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5088
  • Thank you received: 1046
  • Karma: 438
Add this to the end of template.js:
$(document).ready(function() { 	
	// Add some column-specific classes
	$('.array-flexible-row table.question tr').each(function(i, el){
		$('> *', this).each(function(i, el){ 
			$(el).addClass('col-'+i);
		});
	});
});


And then something like this to the end of template.css:
.array-flexible-row .col-1 {
	background: pink !important;
	border: 1px solid red;
}


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: 2 years 4 months ago by tpartner. Reason: Typo
The administrator has disabled public write access.
The following user(s) said Thank You: smiit

Possible to style a specific answer column? 2 years 4 months ago #94655

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7495
  • Thank you received: 1021
  • Karma: 296
And only css solution:
.array-flexible-row table.question tbody td:first-of-type  {
	background: pink !important;
	border: 1px solid red;
}
www.w3.org/CSS/Selectors/pseudo-classes/:first-of-type
The administrator has disabled public write access.

Possible to style a specific answer column? 2 years 4 months ago #94658

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5088
  • Thank you received: 1046
  • Karma: 438
And only css solution:
Yes, but be aware that it's not supported in IE7 or IE8 - reference.sitepoint.com/css/pseudoclass-firstoftype
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.

Possible to style a specific answer column? 2 years 4 months ago #94756

  • smiit
  • smiit's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 2
  • Karma: 0
Thank you both for the clear, timely responses. Tony's .js plus css combo worked perfectly.
The administrator has disabled public write access.

Possible to style a specific answer column? 2 years 4 months ago #94781

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 7495
  • Thank you received: 1021
  • Karma: 296
tpartner wrote:
And only css solution:
Yes, but be aware that it's not supported in IE7 or IE8 -
Maybe selectivizr.com/ can be added ;).

And for give the "Can i use" , i prefer caniuse.com/: caniuse.com/#feat=css-sel3
Because in CC-by-sa 3 ;)
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.153 seconds