- Posts: 17
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
bootstrap columns - same height
- Cleverly
- Topic Author
- Offline
- New Member
Less
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!
Does anyone here have a solution? Thank you!
Last edit: 2 years 10 months ago by Cleverly.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
2 years 10 months ago - 2 years 10 months ago #216288
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 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
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 17
- Thank you received: 0
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12790
- Thank you received: 3940
2 years 10 months ago #216298
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
2 years 10 months ago #216299
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 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":
2) Add this CSS to the question source (or to your custom.css file):
Sample survey attached:
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:
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
2 years 10 months ago #216302
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 bootstrap columns - same height
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.Set the min-height of the answer-containers to the same value, that the heighest question just fits.
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 17
- Thank you received: 0
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
, but nothing has changed. What did I wrong?
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" />');
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
2 years 10 months ago #216313
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 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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 17
- Thank you received: 0
2 years 10 months ago #216316
by Cleverly
Replied by Cleverly on topic bootstrap columns - same height
yes... unfortunately also does not work...Did you try the sample survey I provided?
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
2 years 10 months ago #216318
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 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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12790
- Thank you received: 3940
2 years 10 months ago #216322
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10634
- Thank you received: 3698
2 years 10 months ago #216336
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 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.