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.
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>
