Dev: change of how columns are rendered for 18211 RenderMultiple

LimeSurvey · Jun 20, 2024 · d81ac76 · d81ac76
1 parent 3408660
commit d81ac76
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/application/core/QuestionTypes/MultipleChoice/RenderMultipleChoice.php b/application/core/QuestionTypes/MultipleChoice/RenderMultipleChoice.php
@@ -80,6 +80,11 @@ public function getRows()
             $otherAdded = true;
         }
 
+        // enforce limit of 16 columns, which is a hard limit for the current layout design
+        if ($this->iNbCols > 16) {
+            $this->iNbCols = 16;
+        }
+        $columnWidth = 100 / $this->iNbCols;
         $checkconditionFunction = "checkconditions";
         /// Generate answer rows
         foreach ($this->aSubQuestions[0] as $oQuestion) {
@@ -99,8 +104,10 @@ public function getRows()
                 'sValue'                  => $this->setDefaultIfEmpty($this->aSurveySessionArray[$myfname], ''),
                 'relevanceClass'          => $this->getCurrentRelevecanceClass($myfname),
                 'anscount'                => $this->getQuestionCount(),
-                'iNbCols'                 => $this->iNbCols
+                'iNbCols'                 => $this->iNbCols,
+                'columnWidth'             => $columnWidth
             );
+
             if ($this->hasOther && $this->otherPosition == self::OTHER_POS_AFTER_SUBQUESTION && $this->subquestionBeforeOther == $oQuestion->title) {
                 $aRows[] = $this->getOtherRow();
                 $otherAdded = true;

diff --git a/application/views/survey/questions/answer/multiplechoice/answer.twig b/application/views/survey/questions/answer/multiplechoice/answer.twig
@@ -13,7 +13,7 @@
 
 <!-- answer -->
 <input type="hidden" name="MULTI{{name}}" value="{{anscount}}" />
-<ul class="list-unstyled {{coreClass}} {% if iNbCols > 1 %} ls-column-count-{{iNbCols}}{% endif %}"{% if iNbCols > 1 %} data-column-count={{iNbCols}}{% endif %}>
+<ul class="list-unstyled {{coreClass}} d-flex flex-wrap">
     {% for aRow in aRows %}
         {% set rowTemplate = aRow.other ? './survey/questions/answer/multiplechoice/rows/answer_row_other.twig' : './survey/questions/answer/multiplechoice/rows/answer_row.twig' %}
         <!-- Row {{loop.index}} -->

diff --git a/application/views/survey/questions/answer/multiplechoice/rows/answer_row.twig b/application/views/survey/questions/answer/multiplechoice/rows/answer_row.twig
@@ -19,7 +19,9 @@
  */
 #}
 <!-- answer_row -->
-<li id='javatbd{{ myfname }}' class='question-item answer-item checkbox-item {{ relevanceClass }}'>
+
+{# inline style used to set the flex basis based on calculation in php to prevent having to use javascript when this is very simple #}
+<li id='javatbd{{ myfname }}' class='question-item answer-item checkbox-item {{ relevanceClass }}' style="flex-basis: {{ columnWidth }}%">
     <div class="row">
         <div class="col-auto">
             <input