Bienvenue, Invité
Nom d'utilisateur : Mot de passe : Se souvenir de moi

SUJET : Possible to style a specific answer column?

Possible to style a specific answer column? il y a 1 an 1 semaine #94620

  • smiit
  • Portrait de smiit
  • Hors ligne
  • Fresh Lemon
  • Messages : 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.
L'administrateur a désactivé l'accès en écriture pour le public.

Possible to style a specific answer column? il y a 1 an 1 semaine #94637

  • tpartner
  • Portrait de tpartner
  • Hors ligne
  • LimeSurvey Team
  • Messages : 3813
  • Remerciements reçus 683
  • Karma: 328
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.
Dernière édition: il y a 1 an 1 semaine par tpartner. Raison: Typo
L'administrateur a désactivé l'accès en écriture pour le public.
Cet utilisateur a été remercié pour son message par: smiit

Possible to style a specific answer column? il y a 1 an 1 semaine #94655

  • DenisChenu
  • Portrait de DenisChenu
  • Hors ligne
  • Moderator Lime
  • Messages : 5837
  • Remerciements reçus 713
  • Karma: 222
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
L'administrateur a désactivé l'accès en écriture pour le public.

Possible to style a specific answer column? il y a 1 an 1 semaine #94658

  • tpartner
  • Portrait de tpartner
  • Hors ligne
  • LimeSurvey Team
  • Messages : 3813
  • Remerciements reçus 683
  • Karma: 328
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.
L'administrateur a désactivé l'accès en écriture pour le public.

Possible to style a specific answer column? il y a 1 an 1 semaine #94756

  • smiit
  • Portrait de smiit
  • Hors ligne
  • Fresh Lemon
  • Messages : 2
  • Karma: 0
Thank you both for the clear, timely responses. Tony's .js plus css combo worked perfectly.
L'administrateur a désactivé l'accès en écriture pour le public.

Possible to style a specific answer column? il y a 1 an 1 semaine #94781

  • DenisChenu
  • Portrait de DenisChenu
  • Hors ligne
  • Moderator Lime
  • Messages : 5837
  • Remerciements reçus 713
  • Karma: 222
tpartner écrit:
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 ;)
L'administrateur a désactivé l'accès en écriture pour le public.
Modérateurs: ITEd
Temps de génération de la page : 0.167 secondes
Donation Image