- Posts: 4
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
7 years 4 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
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.
- urbana
- Offline
- Premium Member
Less
More
- Posts: 90
- Thank you received: 17
7 years 4 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:
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
7 years 4 months ago #144214
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
- Thank you received: 0
7 years 4 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
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
- Thank you received: 0
7 years 4 months ago - 7 years 4 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: 7 years 4 months ago by Frankus.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
7 years 4 months ago #144531
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic LS: 2.55.2 / default-template: How to insert an visual array separator?
The CSS solution works for me in all browsers. I suspect your problem was caching.thanks for your suggestions. Unfortunately they both do not work.
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.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).
That is a VERY old workaround. Try this updated script:Now i got the same graphical problems as in the other thread (see screenshot 1).
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 4
- Thank you received: 0
7 years 4 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
7 years 4 months ago #144703
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3691
7 years 4 months ago #144704
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.