Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

NPS Colorscale in Limesurvey?

elissa
Offline
LimeSurvey Community Team

More

7 years 2 months ago #186374 by elissa

Replied by elissa on topic NPS Colorscale in Limesurvey?

Hi Colleagues,

The script added by Tony above: www.limesurvey.org/forum/can-i-do-this-w...in-limesurvey#183356 works perfectly for me (LS 3.17.7+190627). However, I would like to change the width of the first and the last column to be wider than others (to better fit the text what is an issue in my language). How can I set variable column widths in the array?

Thanks

Elzbieta Lesinska
LS voluntary Polish translator and supervisor

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

7 years 2 months ago - 7 years 2 months ago #186378 by tpartner

Replied by tpartner on topic NPS Colorscale in Limesurvey?

Hi Elzbieta,

Try something like this for the CSS - see where I reset the column widths in rows 3-5 and then define new widths in rows 13-28.

Note that the new widths should add up to 100%.

Code:

<style type="text/css">

	.custom-array table.subquestion-list col {
		width: auto !important;
	}
	
	.custom-array table.subquestion-list thead td,
	.custom-array table.subquestion-list thead th {
		border-bottom-width: 8px;
		border-bottom-style: solid;
	}

	.custom-array table.subquestion-list thead .column-0 { 
		padding: 0; 
		width: 0;
	}
	
	.custom-array table.subquestion-list thead .column-1 { border-bottom-color: #00A800; width: 23%; }
	.custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; width: 6%; }
	.custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; width: 6%; }
	.custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; width: 6%; }
	.custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; width: 6%; }
	.custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; width: 6%; }
	.custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; width: 6%; }
	.custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; width: 6%; }
	.custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; width: 6%; }
	.custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; width: 6%; }
	.custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; width: 23%; }

	.custom-array td.column-1:hover,
	.custom-array td.active-item.column-1 { background-color: #00A800; }

	.custom-array td.column-2:hover,
	.custom-array td.active-item.column-2 { background-color: #5AC100; }

	.custom-array td.column-3:hover,
	.custom-array td.active-item.column-3 { background-color: #9DD600; }

	.custom-array td.column-4:hover,
	.custom-array td.active-item.column-4 { background-color: #9CE400; }

	.custom-array td.column-5:hover,
	.custom-array td.active-item.column-5 { background-color: #E2EC00; }

	.custom-array td.column-6:hover,
	.custom-array td.active-item.column-6 { background-color: #ECEC00; }

	.custom-array td.column-7:hover,
	.custom-array td.active-item.column-7 { background-color: #ECE200; }

	.custom-array td.column-8:hover,
	.custom-array td.active-item.column-8 { background-color: #E4C900; }

	.custom-array td.column-9:hover,
	.custom-array td.active-item.column-9 { background-color: #D69D00; }

	.custom-array td.column-10:hover,
	.custom-array td.active-item.column-10 { background-color: #C15A00; }

	.custom-array td.column-11:hover,
	.custom-array td.active-item.column-11 { background-color: #A80200; }
</style>