Welcome to the LimeSurvey Community Forum

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

Disable hyphenation?

  • JanelG
  • JanelG's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 3 days ago #264742 by JanelG
Disable hyphenation? was created by JanelG
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 6.5 
Own server or LimeSurvey hosting: LimeSurvey hosted
Survey theme/template: Customized Fruity 23
==================
Looking to figure out how to keep a browser from auto hyphenation. It seems like it should be straight forward, but the solutions I have found in previous threads are for earlier versions of LimeSurvey and don't work. 
 
Attachments:

Please Log in to join the conversation.

  • tammo
  • tammo's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
4 months 3 days ago #264744 by tammo
Replied by tammo on topic Disable hyphenation?
How would it look when hyphenation is off? I do not think that you have room for that.
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 months 2 days ago #264745 by Joffm
Replied by Joffm on topic Disable hyphenation?
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
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

Moderators: holch, tpartner

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source