Versjon 2.65.0
I have a long list of checkboxes that I would like to display in columns. I have made my own template and added the following code:
Code:
.spalter {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
background-coler:red;
}
In a text-question the CSS-class works as expected, but the list will now flow itself over to the other columns. Just the last few options are in the second column, none in the last.
Do anyone have any idea why this is happening? What can I do to make it work?
Some of the html-code og the question:
Code:
<div id="question145" class="multiple-opt spalter col-xs-12 question-container">
<!-- Question title -->
<div class="row question-wrapper question-title-container">
<div class="col-sm-12 questiontext">
<div class="qnumcode question-text">
Hvilke selskap bruker dere?
</div>
</div>
</div>
<!-- Question valid message -->
<div class="row question-wrapper">
<div class="col-sm-12 questionvalidcontainer">
<div class="text-info questionhelp " role="alert" id="vmsg_145" >
<div id='vmsg_145_default' class='em_default emtip '>
<span class='fa fa-exclamation-circle' aria-hidden="true"></span>
Velg alternativene som passer</div>
</div>
</div>
</div>
<!-- Question help -->
<div class="row question-wrapper question-help-container">
<div class="col-sm-12 question-help">
</div>
</div>
<!-- Answer -->
<div class="row question-wrapper answer-container">
<div class="col-sm-12 answer">
<!-- Multiple Choice -->
<!-- answer -->
<div class="row multiple-choice-container subquestion-list questions-list checkbox-list">
<input type="hidden" name="MULTI975185X7X145" value="105" />
<!-- answer_row -->
<div class="col-sm-12">
<div id='javatbd975185X7X145SQ1' class='question-item answer-item checkbox-item form-group checkbox' >
<input
class="checkbox"
type="checkbox"
name="975185X7X145SQ1"
id="answer975185X7X145SQ1"
value="Y"
onclick='cancelBubbleThis(event); checkconditions(this.value, this.name, this.type)'
aria-labelledby="label-answer975185X7X145SQ1"
/>
<label for="answer975185X7X145SQ1" class="answertext"></label>
<!--
The label text is provided inside a div,
so final user can add paragraph, div, or whatever he wants in the subquestion text
This field is related to the input thanks to attribute aria-labelledby
-->
<div class="label-text label-clickable" id="label-answer975185X7X145SQ1">
en </div>
<input
type="hidden"
name="java975185X7X145SQ1"
id="java975185X7X145SQ1"
value=""
/>
</div>
</div>
<!-- end of answer_row -->
<!-- answer_row -->
<div class="col-sm-12">
<div id='javatbd975185X7X145SQ2' class='question-item answer-item checkbox-item form-group checkbox' >
<input
class="checkbox"
type="checkbox"
name="975185X7X145SQ2"
id="answer975185X7X145SQ2"
value="Y"
onclick='cancelBubbleThis(event); checkconditions(this.value, this.name, this.type)'
aria-labelledby="label-answer975185X7X145SQ2"
/>
<label for="answer975185X7X145SQ2" class="answertext"></label>
<!--
The label text is provided inside a div,
so final user can add paragraph, div, or whatever he wants in the subquestion text
This field is related to the input thanks to attribute aria-labelledby
-->
<div class="label-text label-clickable" id="label-answer975185X7X145SQ2">
to </div>
<input
type="hidden"
name="java975185X7X145SQ2"
id="java975185X7X145SQ2"
value=""
/>
</div>
</div>
<!-- end of answer_row -->
Topic Author
