EbookFoundation
/
fef-questionnaire
mirror of https://github.com/EbookFoundation/fef-questionnaire.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

choice-multiple-values questions now align after longest string 

Added Javascript to template.

Adjusted CSS so the max width can be a bit wider.
This won't affect Javascript.

Still need to refactor so code is tidier - right now same code included
multiple times on pages.
dj111py38
Sara Arenson 2015-12-09 12:03:22 -06:00
parent 37429dcf32
commit ad9b327558
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
questionnaire/static/questionnaire.css
View File

@ -110,7 +110,7 @@ html, body {
span.choice-multiple-values-text {
display: inline-block;
width: 35%;
max-width: 40%;
}
input.sending {

18
questionnaire/templates/questionnaire/choice-multiple-freeform.html
View File

@ -19,6 +19,24 @@
<!-- </label> -->
</li>
{% endfor %}
{% if qdict.type == 'choice-multiple-values' %}
<script type="text/javascript">
var question = document.getElementById("qc_{{question.number}}");
var choice_boxes = question.getElementsByClassName("choice-multiple-values-text");
var max_width = 0;
for (i = 0 ; i < choice_boxes.length ; i++) {
box_width = choice_boxes[i].offsetWidth;
if (box_width > max_width)
max_width = box_width;
}
for (i = 0 ; i < choice_boxes.length ; i++) {
box_width = choice_boxes[i].offsetWidth;
padding = max_width - box_width;
if (padding > 0)
choice_boxes[i].style.paddingRight = padding + "px";
}
</script>
{% endif %}
{% if qdict.extras %}
{% for key, value in qdict.extras %}