Welcome to the LimeSurvey Community Forum

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

Insert Blank column/row to seperate "no answer" choice

BBSR-SR5
Topic Author
Offline
Senior Member

More

1 month 6 days ago #258862 by BBSR-SR5

Insert Blank column/row to seperate "no answer" choice was created by BBSR-SR5

Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Version 6.4.12 Own server or LimeSurvey hosting: Limesurvey hosting
Survey theme/template: fruity_twentythree
==================
Hi everyone,

I'm trying to add a blank column (in desktop mode) / row (in mobile mode) to my matrix questions to better separate the "no answer"/"I don't know" option from the "valid" answers.

I've found this solution , which suggests adding another column to the table and then just removing the header and radio buttons. Unfortunately this leaves a normal sized row in mobile mode and I'd really love to reduce the blank row in size.

I've been using the following code and trying to change the height in "row mode" by just setting the height attribute. Unfortunately this does not seem to work and doesn't change the row size at all.

Code:

<script type="text/javascript" data-author="Tony Partner">  
  $(document).on('ready pjax:scriptcomplete',function(){
 
    $('#question{QID} tr.ls-heading th:nth-child(5)').text('');
    $('#question{QID} tr[id^="javatbd"] .answer-item:nth-child(5) *').remove();
  });
</script>
<style type="text/css">#question{QID} col:nth-child(5) {
    width: 4% !important
   [color=#e74c3c] height: 4% !important;[/color]
  }
 
  #question{QID} tr.ls-heading th:nth-child(5),
  #question{QID} tr[id^="javatbd"] .answer-item:nth-child(5)  {
    padding: 0 !important;
  }
  td.answer_cell_99 {
background-color:  !important;
border-left: 2px solid #B8B8B8 !important;
}
</style>
</p>

Furthermore I would be thankful if I did not need to manually add an empty column to each matrix, but just insert an empty column/row in front of answer_cell_99. Is this possible?

Thank you

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

1 month 5 days ago #258878 by tpartner

Replied by tpartner on topic Insert Blank column/row to seperate "no answer" choice

BBSR-SR5 wrote:
Furthermore I would be thankful if I did not need to manually add an empty column to each matrix, but just insert an empty column/row in front of answer_cell_99. Is this possible?

The problem with inserting a new column is that it will mess with the widths of the existing columns.

Can you attach a small sample survey(.lss file) with a single question?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

BBSR-SR5
Topic Author
Offline
Senior Member

More

1 month 5 days ago #258882 by BBSR-SR5

Replied by BBSR-SR5 on topic Insert Blank column/row to seperate "no answer" choice

Sure, that's what I've been playing with so far:

Attachments:

...vey_382614.lss

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

1 month 5 days ago - 2 weeks 5 days ago #258884 by tpartner

Replied by tpartner on topic Insert Blank column/row to seperate "no answer" choice

To insert a spacer column before the last column which would, for example, have a width 2% on larger screens and a height 20px on mobile screens, insert this JS and CSS in the question source:

Code:

<script type="text/javascript" data-author="Tony Partner">
 
   $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify some elements
        var thisQuestion = $('#question{QID}');
        var thisTable = $('table.subquestion-list', thisQuestion);
 
        // Adjust column widths
        var spacerWidthPercent = 2;
        var labelWidth = ($('col:first', thisTable).width()/$('colgroup:first', thisTable).width())*100;
        var answerWidth = (100-labelWidth-spacerWidthPercent)/$('col:gt(0)', thisTable).length;
        $('col:gt(0)', thisTable).width(answerWidth+'%');
 
        // Insert some elements
        $('col:last', thisTable).before('<col class="inserted-spacer">');
        $('thead th:last-child, tr.ls-heading-repeat th:last-child', thisTable).before('<th class="inserted-spacer" />');
        $('tbody td.answer-item:last-child', thisTable).before('<td class="inserted-spacer" />');
 
    });
</script>

Code:

<style type="text/css" data-author="Tony Partner">
    @media only screen and (max-width: 768px) {
 
        #question{QID} table.ls-answers tbody td.inserted-spacer {
            height: 20px;
            min-height: 0;
            padding: 0;
        }
    }
</style>

Sample survey attached:

File Attachment:

File Name: limesurvey...6141.lss
File Size:26 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 2 weeks 5 days ago by tpartner.

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

1 month 5 days ago #258885 by tpartner

Replied by tpartner on topic Insert Blank column/row to seperate "no answer" choice

If you want to apply this to multiple questions...

1) Assign those questions a CSS class "inserted-spacer-question".

2) Extend your survey theme.

3) Add this to the custom.js file:

Code:

$(document).on('ready pjax:scriptcomplete',function(){
 
    $('.array-flexible-row.inserted-spacer-question').each(function(e) {
 
        // Identify some elements
        var thisQuestion = $(this);
        var thisTable = $('table.subquestion-list', thisQuestion);
 
        // Adjust column widths
        var spacerWidthPercent = 2;
        var labelWidth = ($('col:first', thisTable).width()/$('colgroup:first', thisTable).width())*100;
        var answerWidth = (100-labelWidth-spacerWidthPercent)/$('col:gt(0)', thisTable).length;
        $('col:gt(0)', thisTable).width(answerWidth+'%');
 
        // Insert some elements
        $('col:last', thisTable).before('<col class="inserted-spacer">');
        $('thead th:last-child', thisTable).before('<th class="inserted-spacer" />');
        $('tbody td.answer-item:last-child', thisTable).before('<td class="inserted-spacer" />');
 
    });
 
});

4) Add this to the custom.css file:

Code:

@media only screen and (max-width: 768px) {
 
    .inserted-spacer-question tbody td.inserted-spacer {
        height: 20px;
        min-height: 0;
        padding:  0;
    }
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

BBSR-SR5
Topic Author
Offline
Senior Member

More

1 month 5 days ago #258890 by BBSR-SR5

Replied by BBSR-SR5 on topic Insert Blank column/row to seperate "no answer" choice

Thanks a lot for your help. I got the upper version for a single question to work, but didn't manage with the general version.

I've been using this code to assign the class.

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
    $('#question{QID}').addClass('inserted-spacer-question');
  });
</script>

Is this correct, or should I do this some other way?

I've also been adding this code to the blueberry.css since I'm using that version.

Code:

@media only screen and (max-width: 768px) {
 
    .inserted-spacer-question tbody td.inserted-spacer {
        height: 20px;
        min-height: 0;
        padding:  0;
    }
}

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

1 month 5 days ago #258894 by tpartner

Replied by tpartner on topic Insert Blank column/row to seperate "no answer" choice

CSS class does not require JavaScript, it's a question setting - manual.limesurvey.org/Question_type_-_Ar...lass_.28css_class.29

You need to add the JavaScript and the CSS I supplied to the appropriate theme files.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

BBSR-SR5
Topic Author
Offline
Senior Member

More

1 month 21 hours ago #259055 by BBSR-SR5

Replied by BBSR-SR5 on topic Insert Blank column/row to seperate "no answer" choice

Thank you, this works great. I'm really starting to build a standard template for our surveys here that we can recycle for future projects.

Anyway I still have one minor issue. When I try to make the text in the final column cursive, (either wit <i> or <em>) , it hides the text in mobile mode. How can I fix this?

Normal:

Mobile:

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

1 month 19 hours ago #259058 by tpartner

Replied by tpartner on topic Insert Blank column/row to seperate "no answer" choice

That has nothing to do with this workaround. It is a bug with the fruity_twentythree theme.

Please report it - bugs.limesurvey.org (log in with the same credentials used here).

In the meantime, you can work around it by extending the theme and adding this to the end of the custom.css file:

Code:

@media only screen and (max-width: 760px) {
    table.ls-answers .ls-label-xs-visibility > em,
    table.ls-answers .ls-label-xs-visibility > i {
        position: relative;
    }
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

BBSR-SR5
Topic Author
Offline
Senior Member

More

1 month 53 minutes ago - 1 month 52 minutes ago #259088 by BBSR-SR5

Replied by BBSR-SR5 on topic Insert Blank column/row to seperate "no answer" choice

Thanks for the answer, I'll try that. Anyway, I can't log in with the bbsr-sr5 credentials on the bug reporting platform, it tells me my account is deactivated or blocked.

Do I need to activate it somewhere?

Last edit: 1 month 52 minutes ago by BBSR-SR5. Reason: clarifying where I'm trying to log in.

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

4 weeks 2 days ago #259094 by tpartner

Replied by tpartner on topic Insert Blank column/row to seperate "no answer" choice

Bug reported - bugs.limesurvey.org/view.php?id=19499

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

BBSR-SR5
Topic Author
Offline
Senior Member

More

2 weeks 5 days ago #260061 by BBSR-SR5

Replied by BBSR-SR5 on topic Insert Blank column/row to seperate "no answer" choice

While the solution works perfectly fine normally, I want to repeat the header in large matrixes. In that case the "no answer" category gets written into the spacer column:

I assume the reason for this is when the headers get written since the code only seems to insert a column. Is there some easy workaround?

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Insert Blank column/row to seperate "no answer" choice

File Attachment:

Lime-years ahead

Legal

About Us

Open Source