Disable hyphenation?

JanelG
Topic Author
Offline
New Member

8 months 1 week 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
Offline
Official LimeSurvey Partner

8 months 1 week 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
Offline
LimeSurvey Community Team

8 months 1 week 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

Welcome to the LimeSurvey Community Forum

Disable hyphenation?

Lime-years ahead

Legal

About Us

Open Source