Hi,
at first: This is not LimeSurvey related, this is browser specific.
You may read here about hyphens and
[url]
www.w3schools.com/cssref/css3_pr_hyphens.php
[/url]
and about the "white-space" property
[url]
www.w3schools.com/cssref/pr_text_white-space.php
[/url]
So, if you use
Code:
span style="white-space:nowrap;">extremely<br/>likely</span><br/>0
the text will not break, only at your breakpoints.
As it doesn't break parts may mnot be visible
Now, what do I recommend?
1. Revise your text.
Obviously the question is something like
"How likely will you recommend the following brands?"
So it is not necessary to repeat it in the scale header (you also can omit "likely")
And you should put the number into a separate line
With items like
Code:
not at all<br/>likely<br/>0
you get this
2. You can display the columns with different widths.
Insert this script
a. javascript
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
});
</script>
b. css (you may adapt the width to your needs)
Code:
<style type="text/css">
.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column-0 { width: 21%; }
.custom-array table.subquestion-list thead .column-1 { width: 17%; }
.custom-array table.subquestion-list thead .column-2 { width: 5%; }
.custom-array table.subquestion-list thead .column-3 { width: 5%; }
.custom-array table.subquestion-list thead .column-4 { width: 5%; }
.custom-array table.subquestion-list thead .column-5 { width: 5%; }
.custom-array table.subquestion-list thead .column-6 { width: 5%; }
.custom-array table.subquestion-list thead .column-7 { width: 5%; }
.custom-array table.subquestion-list thead .column-8 { width: 5%; }
.custom-array table.subquestion-list thead .column-9 { width: 5%; }
.custom-array table.subquestion-list thead .column-10 { width: 5%; }
.custom-array table.subquestion-list thead .column-11 { width: 17%; }
</style>
3. Use a separate header
I admit the wording of "Not at all" has to be changed.
With this script
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Insert the column categories
$('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
<td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
<th class="answer-text inserted-header" colspan="5" style="text-align:left;font-size:14pt;color:maroon;background-color:silver">unlikely to recommend</th>\
<th class="answer-text inserted-header" colspan="6" style="text-align:right;font-size:14pt;color:maroon;background-color:silver">likely to recommend</th>\
</tr>');
});
</script>
As before: Adapt to your needs (font-size, color, background,...)
4. Additionally you could use colors to explain the scale
Here the script
javascript:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){ // Identify this question
var thisQuestion = $('#question{QID}'); // Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
}); // Listener on the radios
$('input:radio', thisQuestion).on('click', function(i) {
$(this).closest('tr').find('.active-item').removeClass('active-item');
$(this).closest('td').addClass('active-item');
});
});
</script>
css;
Code:
<style type="text/css">
.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-1 { border-bottom-color: #00A800; }
.custom-array table.subquestion-list thead .column-2 { border-bottom-color: #5AC100; }
.custom-array table.subquestion-list thead .column-3 { border-bottom-color: #9DD600; }
.custom-array table.subquestion-list thead .column-4 { border-bottom-color: #9CE400; }
.custom-array table.subquestion-list thead .column-5 { border-bottom-color: #E2EC00; }
.custom-array table.subquestion-list thead .column-6 { border-bottom-color: #ECEC00; }
.custom-array table.subquestion-list thead .column-7 { border-bottom-color: #ECE200; }
.custom-array table.subquestion-list thead .column-8 { border-bottom-color: #E4C900; }
.custom-array table.subquestion-list thead .column-9 { border-bottom-color: #D69D00; }
.custom-array table.subquestion-list thead .column-10 { border-bottom-color: #C15A00; }
.custom-array table.subquestion-list thead .column-11 { border-bottom-color: #A80200; }.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>
You see there are many options to style the question.
Joffm
