Welcome to the LimeSurvey Community Forum

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

bootstrap columns - same height

  • Cleverly
  • Cleverly's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 10 months ago - 2 years 10 months ago #216286 by Cleverly
bootstrap columns - same height was created by Cleverly
Hi, I use several different col-sm-* in my surveys (directly in the questions at css-class) However, in my case different question types have different heights, which doesn't look good. Unfortunately I'm not good at programming so I don't know how to get the different columns to the same height.

Does anyone here have a solution? Thank you!
Last edit: 2 years 10 months ago by Cleverly.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago - 2 years 10 months ago #216288 by tpartner
Replied by tpartner on topic bootstrap columns - same height
A solution may be the CSS flexible box module.

If you have more than one "row", you may need to wrap the questions in container <div> elements.

- developer.mozilla.org/en-US/docs/Web/CSS..._Concepts_of_Flexbox

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 2 years 10 months ago by tpartner.
The topic has been locked.
  • Cleverly
  • Cleverly's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 10 months ago #216294 by Cleverly
Replied by Cleverly on topic bootstrap columns - same height
thanks for your quick answer! Unfortunately I have more questions than answers now..
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216298 by Joffm
Replied by Joffm on topic bootstrap columns - same height
My - quick and dirty - solution:
Set the min-height of the answer-containers to the same value, that the heighest question just fits.

 

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Cleverly
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216299 by tpartner
Replied by tpartner on topic bootstrap columns - same height
If, for example, you want three questions in a row...

1) Add a script like this to the question source. It will wrap that question and the next two questions in a <div> element with classname "question-flex-container":

Code:
<script type="text/javascript" data-author="Tony Partner">  
  $(document).ready(function() {
 
    // The number of questions to wrap in the flex container
    var numberQuestions = 3;
 
    // Identify the questions
    var thisQuestion = $('#question34824');    
    var rowQuestions = thisQuestion.add(thisQuestion.nextAll('.question-container:lt('+(numberQuestions-1)+')'));
 
    // Wrap the questions in a <div> element
    rowQuestions.wrapAll('<div class="question-flex-container" />');
  });
</script>

2) Add this CSS to the question source (or to your custom.css file):

Code:
<style type="text/css">
  @media only screen and (min-width: 576px) {  
    .question-flex-container {
      display: flex;
      justify-content: space-evenly;
    }
  }
</style>

 

Sample survey attached: 

File Attachment:

File Name: limesurvey...1446.lss
File Size:25 KB

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: Joffm, ployrich
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216302 by tpartner
Replied by tpartner on topic bootstrap columns - same height

Set the min-height of the answer-containers to the same value, that the heighest question just fits.

That will work for a fixed screen width but will not be responsive to varying screen widths where the question or answer text may wrap.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Cleverly
  • Cleverly's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 10 months ago #216310 by Cleverly
Replied by Cleverly on topic bootstrap columns - same height
Thanks for the guide! but...

I added the css and html like you did. But see attached what happens. Than I thought i try it without the 
Code:
rowQuestions.wrapAll('<div class="question-flex-container" />');
, but nothing has changed. What did I wrong?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216313 by tpartner
Replied by tpartner on topic bootstrap columns - same height
Did you try the sample survey I provided?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Cleverly
  • Cleverly's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 10 months ago #216316 by Cleverly
Replied by Cleverly on topic bootstrap columns - same height

Did you try the sample survey I provided?
yes... unfortunately also does not work...
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216318 by tpartner
Replied by tpartner on topic bootstrap columns - same height
Do you have permissions to insert JavaScript and CSS?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216322 by Joffm
Replied by Joffm on topic bootstrap columns - same height
Did you adapt this line

var thisQuestion = $('#question34824'); ?

either with your question ID, or {QID}

Joffm


 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 10 months ago #216336 by tpartner
Replied by tpartner on topic bootstrap columns - same height
Oops, yeah, that's a cut/paste error. It should be:

Code:
var thisQuestion = $('#question{QID}');

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose