Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Borders within Individual Arrays?

  • BBCMResearch
  • BBCMResearch's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 7 months ago #141248 by BBCMResearch
Borders within Individual Arrays? was created by BBCMResearch
Hello,

I've seen a few posts on here discussing how to change the borders of array questions, but they all involve editing templates. I don't need to change all the borders on all of the arrays in my survey. Rather, only one of my arrays needs one thick black horizontal border separating two subquestions in the middle of the array. Is there something I can add to the source of the subquestion without delving into the template to make this change? I use Version 2.50+160901.

Thanks!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago - 8 years 7 months ago #141257 by tpartner
Replied by tpartner on topic Borders within Individual Arrays?
I think, to accommodate responsiveness, you need to insert a new row and some styles for various screen widths.

Add something like this to the question source. Note that the index for the "tr.radio-list:eq(2)" selector starts at 0, so this example will insert the new row before row-3.

Code:
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function(){
 
    var thisQuestion = $('#question{QID}');
 
    //Insert new style rules
    var newStyle = '<style type="text/css">\
              .inserted-spacer-row {\
                border-top: 5px solid #FFFFFF;\
                border-bottom: 5px solid #FFFFFF;\
                background-color: #2C3E50;\
              }\
              .inserted-spacer-row td {\
                padding: 10px !important;\
              }\
              @media only screen and (max-width: 801px) {\
                .inserted-spacer-row {\
                  margin-bottom: 20px;\
                  padding: 0 !important;\
                  border: 1px solid #2C3E50 !important;\
                  border-radius: 4px;\
                }\
              }\
            </style>';    
    $("head link[rel='stylesheet']").last().after(newStyle);
 
    // Define a spacer row
    var numCells = $('tr.radio-list:eq(0) > *', thisQuestion).length;
    var insertedRow = '<tr class="inserted-spacer-row">\
                <td colspan="'+numCells+'"></td>\
              </tr>';
 
    // Insert a spacer row
    $(insertedRow).insertBefore('tr.radio-list:eq(2)', thisQuestion);
  });
</script>



Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 8 years 7 months ago by tpartner.
The topic has been locked.
  • BBCMResearch
  • BBCMResearch's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 7 months ago #141271 by BBCMResearch
Replied by BBCMResearch on topic Borders within Individual Arrays?
Works perfectly! Thanks for yet another timely assist!
The topic has been locked.
  • BBCMResearch
  • BBCMResearch's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 7 months ago #141277 by BBCMResearch
Replied by BBCMResearch on topic Borders within Individual Arrays?
So...weird thing happened. I added your code to two different questions, previewed them, and they looked fine. However, when I take the survey, one of the questions works as previewed, but the other shows the bar back before row 3, when it should be before row 6 and I changed the last piece of code to read $(insertedRow).insertBefore('tr.radio-list:eq(5). Any idea why there might be this discrepancy?
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago #141356 by tpartner
Replied by tpartner on topic Borders within Individual Arrays?
Can you activate a small test survey and give a link here?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • BBCMResearch
  • BBCMResearch's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 7 months ago #141379 by BBCMResearch
Replied by BBCMResearch on topic Borders within Individual Arrays?
Here you go: survey2.barbaricum.com/index.php/337312?lang=en . I suspect it has something to do with the fact that the first question shares a group with other questions, while the second question does not.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago #141391 by tpartner
Replied by tpartner on topic Borders within Individual Arrays?
Hmm...I have no clue why the scope isn't working with insertBefore(), but this should do the trick.

Code:
<script charset="utf-8" type="text/javascript">    
  $(document).ready(function(){
 
    var thisQuestion = $('#question{QID}');
 
    //Insert new style rules
    var newStyle = '<style type="text/css">\
              .inserted-spacer-row {\
                border-top: 1px solid #FFFFFF;\
                border-bottom: 1px solid #FFFFFF;\
                background-color: #2C3E50;\
              }\
              .inserted-spacer-row td {\
                padding: 3px !important;\
              }\
              @media only screen and (max-width: 801px) {\
                .inserted-spacer-row {\
                  margin-bottom: 3px;\
                  padding: 0 !important;\
                  border: 1px solid #2C3E50 !important;\
                  border-radius: 4px;\
                }\
              }\
            </style>';    
    $("head link[rel='stylesheet']").last().after(newStyle);
 
    // Define a spacer row
    var numCells = $('tr.radio-list:eq(0) > *', thisQuestion).length;
    var insertedRow = '<tr class="inserted-spacer-row">\
                <td colspan="'+numCells+'"></td>\
              </tr>';
 
    // Insert a spacer row
    $('tr.radio-list:eq(5)', thisQuestion). before(insertedRow);
  });
</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.
  • BBCMResearch
  • BBCMResearch's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 7 months ago #141392 by BBCMResearch
Replied by BBCMResearch on topic Borders within Individual Arrays?
Working perfectly. Thanks again!
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