Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: array dual scale change width of separator

array dual scale change width of separator 1 Jahr 4 Monate her #94288

  • knabbels
  • knabbelss Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

array dual scale change width of separator 1 Jahr 3 Monate her #94765

  • mozart
  • mozarts Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

array dual scale change width of separator 1 Jahr 2 Monate her #96478

  • StuTheQ
  • StuTheQs Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

array dual scale change width of separator 1 Jahr 2 Monate her #96485

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4072
  • Dank erhalten: 748
  • Karma: 341
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: StuTheQ

array dual scale change width of separator 1 Jahr 2 Monate her #96508

  • StuTheQ
  • StuTheQs Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.169 Sekunden
Donation Image