Possible to style a specific answer column?

More
5 years 3 months ago #94620 by smiit
smiit created the topic: Possible to style a specific answer column?
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.

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago - 5 years 3 months ago #94637 by tpartner
tpartner replied the topic: Possible to style a specific answer column?
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;
}



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 5 years 3 months ago by tpartner. Reason: Typo
The following user(s) said Thank You: smiit

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #94655 by DenisChenu
DenisChenu replied the topic: Possible to style a specific answer column?
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

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #94658 by tpartner
tpartner replied the topic: Possible to style a specific answer column?

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.

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #94756 by smiit
smiit replied the topic: Possible to style a specific answer column?
Thank you both for the clear, timely responses. Tony's .js plus css combo worked perfectly.

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #94781 by DenisChenu
DenisChenu replied the topic: Possible to style a specific answer column?

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 ;)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!