Welcome, Guest
Username: Password: Remember me

TOPIC: Possible to style a specific answer column?

Possible to style a specific answer column? 1 year 6 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? 1 year 6 months ago #94637

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
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;
}


Capture_2013-04-05.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 year 6 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? 1 year 6 months ago #94655

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
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? 1 year 6 months ago #94658

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4272
  • Thank you received: 806
  • Karma: 369
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? 1 year 6 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? 1 year 6 months ago #94781

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6451
  • Thank you received: 844
  • Karma: 249
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.119 seconds
Donation Image