Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

LS: 2.55.2 / default-template: How to insert an visual array separator?

  • Frankus
  • Frankus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 7 months ago #144193 by Frankus
LS: 2.55.2 / default-template: How to insert an visual array separator? was created by Frankus
Hi there,

i´m using a seven point scale on an array question (stimme überhaupt nicht zu, stimme eher nicht zu, teils/teils, stimme eher zu, stimme voll zu, weiß nicht, keine Angabe).

I want to add a visual separator to separate the last to answers (weiß nicht, keine Angabe).
It should look like this one: www.limesurvey.org/de/foren/can-i-do-thi...or-an-array-question
But i would prefer a solution without javascript.

In version 2.05 of limesuvey i solved it by adding this to template.css:
.answer_cell_006 {
border-left: 2px solid #000000;
}

Since i upgraded to version 2.55.2 of LS (hosted by Limeservice) this does not work anymore. I´m using a slighty modified version of the default-template.

Thank you very much for helping,
Frank
The topic has been locked.
More
8 years 7 months ago #144197 by urbana
Replied by urbana on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
Why don't you want to use Javascript?
It is with pure css a quite challenging part since the new templates are responsive. So while you need on a deskop pc a left border you need on a tablet or mobile a top bar.

And the items you have to style don't have ID's so selecting them with pure css is also more tricky.
With JS it is a little bit more simpler because you can check the window width and select the DIV's more easy.

You need to style the penultimate div of the div with the class answers-list and his first child div with class row:
Code:
<div class="col-sm-1 col-xs-12" style="border-left: 2px solid black;">
    <div class="row" style="margin-left: 2px;">

That would achieve you something like in attachment 1 but when it is viewed on a mobile it breaks (see attachment 2)

Of course you style it with CSS and nth-child selectors or so but then it would be used on every list AND you would have to use media queries
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago #144214 by tpartner
Replied by tpartner on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
I think, perhaps, the rule for the border style is being overridden by a more specific style.

Try something like this which should also take care of the responsive aspect:

Code:
.answer_cell_006 {
  border-left: 2px solid #000000 !important;
}
 
 
@media only screen and (max-width: 768px) {
  .answer_cell_006 {
    border-left: 0 none !important;
    border-top: 2px solid #000000 !important;
  }
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Frankus
  • Frankus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 6 months ago #144507 by Frankus
Replied by Frankus on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
Hello urbana and tpartner,

thanks for your suggestions. Unfortunately they both do not work.
tpartner, I tried your javascript solution from this thread: www.limesurvey.org/de/foren/can-i-do-thi...or-an-array-question
Now i got the same graphical problems as in the other thread (see screenshot 1). Furthermore, the border should only appear on matrix questions that use my mentioned own-defined scale, not on other question types (see screenshot 2 where the border should not appear).
Could you please check this demo here?

Thanks for helping!
Frank
Attachments:
The topic has been locked.
  • Frankus
  • Frankus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 6 months ago - 8 years 6 months ago #144519 by Frankus
Replied by Frankus on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
Strange, the URL has been replaced. Here´s the correct one .
Last edit: 8 years 6 months ago by Frankus.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #144531 by tpartner
Replied by tpartner on topic LS: 2.55.2 / default-template: How to insert an visual array separator?

thanks for your suggestions. Unfortunately they both do not work.

The CSS solution works for me in all browsers. I suspect your problem was caching.

Furthermore, the border should only appear on matrix questions that use my mentioned own-defined scale, not on other question types (see screenshot 2 where the border should not appear).

You seem to have inserted the script after the help section of all questions. It is supposed to be placed in the question source, not in question.pstpl.

Now i got the same graphical problems as in the other thread (see screenshot 1).

That is a VERY old workaround. Try this updated script:

Code:
<script type="text/javascript" charset="utf-8">  
 
  $(document).ready(function() {
 
    var newColPosition = 3;
 
    // Identify this question ID
    var qID = {QID};
 
    // Insert a new column
    $('#question'+qID+' table.subquestion-list col:eq('+(newColPosition-1)+')', this).after('<col class="inserted-column" />');
    $('#question'+qID+' table.subquestion-list thead th:eq('+(newColPosition-1)+')', this).after('<th class="inserted-column" />');
    $('#question'+qID+' table.subquestion-list tbody tr').each(function(i) {
      $('td:eq('+(newColPosition-2)+')', this).after('<td class="inserted-column" />');
    });
  });
</script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Frankus
  • Frankus's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 6 months ago #144697 by Frankus
Replied by Frankus on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
Hello Tony,

thank you very much for your help! Your new script works as code placed to a question itself.
One thing: When resizeing the browser window (FF Desktop), the small separator becomes a very thick horizontal one (see screenshot). How can this be corrected?

Thanks!
Frank
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #144703 by tpartner
Replied by tpartner on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
Try something like this at the end of template.css:

Code:
@media only screen and (min-width: 768px) {
  .inserted-column {
    min-height: 4px !important;
    padding: 0 !important;
  }
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 6 months ago #144704 by tpartner
Replied by tpartner on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
Oops, got the wrong media query - use this instead:

Code:
@media only screen and (max-width: 801px) {
  .inserted-column {
    min-height: 4px !important;
    padding: 0 !important;
  }
}
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source