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

SUJET : array dual scale change width of separator

array dual scale change width of separator il y a 1 an 6 mois #94288

  • knabbels
  • Portrait de knabbels
  • Hors ligne
  • Fresh Lemon
  • Messages : 1
  • Karma: 0
I'm working with dual arrays in my survey. How is it possible to change the width of the array separator?


In the .css file I found this entry:
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
	background-color:#ffffff;
}

How can I modify this entry so the seperator becomes thinner? For better understanding I attached a picture. The space between 2013 and 2020 needs to be smaller.


separator.PNG
L'administrateur a désactivé l'accès en écriture pour le public.

array dual scale change width of separator il y a 1 an 6 mois #94765

  • mozart
  • Portrait de mozart
  • Hors ligne
  • Fresh Lemon
  • Messages : 4
  • Karma: 0
Hey,

you can change the size of the seperator via this:
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
border-right:solid 1px #00A8E1; /* anzupassen: Farbe des Rahmens*/
}

Found it here: docs.limesurvey.org/The+template+editor&...rvey#Tips_amp_Tricks

Best Regards
L'administrateur a désactivé l'accès en écriture pour le public.

array dual scale change width of separator il y a 1 an 4 mois #96478

  • StuTheQ
  • Portrait de StuTheQ
  • Hors ligne
  • Junior Lime
  • Messages : 26
  • Karma: 0
Hello,

Can anybody suggest a better workaround for adjusting the separator width in Array Dual Scale questions?

I currently have two, which give reasonable results, but involve a bit of 'trial and error' regarding the array layout:

1. based on the 'Create a vertical separator border for dual scale array' script in the 'Tips & Tricks' section of 'The Template Editor' chapter in the manual manual.limesurvey.org...#Create_a_vertical_separator_.C2.A0border_for_dual_scale_array, as adopted/suggested by Knabbels (post #94288) and Mozart (post #94765)
}
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator
{
   border-right:solid 50px #FFF;
}
('border-right' creates a white (same colour as 'default' template background) 50px-wide right border on the first array. This is OK except that the grey-blue row hover bar (I'm not sure if this is the right term) has a 50-px gap in it.

2. using the 'Variable column widths in array' script in the 'Workarounds: Question design, layout and templating' section of the manual (amended with spaces after opening and before closing curly braces to avoid parsing issues with EM) (see post #96438)
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function() {
 
		// Get rid of all the widths that the API imposes
		$( 'div#question{QID} table.question col' ).attr('width', '');
		$( 'div#question{QID} 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#question{QID} 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%
		// NOTE: Columns must be sequentially numbered starting at 0 - eg, td:eq(0), td:eq(1), td:eq(2).....
		$( 'div#question{QID} table.question tbody th:eq(0)' ).css({ 'width':'20%' }); // Answer text column
		$( 'div#question{QID} table.question tbody td:eq(0)' ).css({ 'width':'25%' }); // First answer column
		$( 'div#question{QID} table.question tbody td:eq(1)' ).css({ 'width':'40%' }); // Second answer column
		$( 'div#question{QID} table.question tbody td:eq(2)' ).css({ 'width':'15%' }); // Third answer column
 
		// Push the text input widths to 95% of their parent containers
		$( 'div#question{QID} table.question input[type="text"]' ).css({ 'width':'95%' });
 
		// Align the answer text - feel free to experiment
		$( 'div#question{QID} table.question tbody th' ).css({ 'text-align':'center' });
 
	});
</script>

This workaround makes it possible to effectively adjust the width of the separator column, but requires a bit of playing around with the column width % until you get the array layout that you want.

Any ideas or suggestions?

Thanks in advance!

Regards,

StuTheQ
L'administrateur a désactivé l'accès en écriture pour le public.

array dual scale change width of separator il y a 1 an 4 mois #96485

  • tpartner
  • Portrait de tpartner
  • Hors ligne
  • LimeSurvey Team
  • Messages : 4281
  • Remerciements reçus 807
  • Karma: 370
To flesh out #1 a bit. If using the default template...

If you want to control the width of the separator column and give it a white background even when the row is hovered, add this to the end of template.css:
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator {
	 border-right: solid 50px #FFFFFF;
	 background-color: #FFFFFF; 
}


If you want to control the width of the separator column, give it a white background but have the background change to purply-blue when the row is hovered, add this to the end of template.css:
table.question thead td.header_separator,
table.question tbody td.dual_scale_separator {
	 border-right: solid 50px #FFFFFF;
	 background-color: #FFFFFF; 
}
 
table.question tr.array1:hover td.dual_scale_separator,
table.question tr.array2:hover td.dual_scale_separator {
	 border-right: solid 50px #A7A9D1;
	 background-color: #A7A9D1; 
}
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.
Cet utilisateur a été remercié pour son message par: StuTheQ

array dual scale change width of separator il y a 1 an 4 mois #96508

  • StuTheQ
  • Portrait de StuTheQ
  • Hors ligne
  • Junior Lime
  • Messages : 26
  • Karma: 0
Dear Tony,

That's excellent - thank you very much!! :cheer:

Both solutions produce a really pro row hover bar display (now I just have to decide which one I like the most... ;) )

Thanks again!

Regards,

Stu
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.176 secondes
Donation Image