From 27ad11ab4b43e6228e6c49f16f8bca95ca2b73ea Mon Sep 17 00:00:00 2001
From: Joel Pearce <joelpearce1994@gmail.com>
Date: Thu, 27 Jul 2023 14:39:32 +0100
Subject: [PATCH] [#PAB-508]: add scrollable checkboxes

..

..
---
 app/static/src/css/custom.css      |  5 +++++
 app/templates/main/checkboxes.html | 24 +++++++++++++-----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/app/static/src/css/custom.css b/app/static/src/css/custom.css
index 41d29a9..ef46688 100644
--- a/app/static/src/css/custom.css
+++ b/app/static/src/css/custom.css
@@ -31,3 +31,8 @@
         padding-bottom: 40px;
       }
 }
+
+.scrollable-checkboxes {
+    max-height: 250px;
+    overflow-y: auto;
+  }
diff --git a/app/templates/main/checkboxes.html b/app/templates/main/checkboxes.html
index b267f5e..3fd3f54 100644
--- a/app/templates/main/checkboxes.html
+++ b/app/templates/main/checkboxes.html
@@ -1,18 +1,20 @@
 {% macro checkboxItems(name, items) %}
 <div class="govuk-form-group">
     <fieldset class="govuk-fieldset" aria-describedby="">
-        <div class="govuk-checkboxes" data-module="govuk-checkboxes">
-            {% for item in items %}
-            {% if item %}
-            <div class="govuk-checkboxes__item">
-                <input class="govuk-checkboxes__input" id="{{ name }}-{{ item['id'] }}" name="{{ name }}" type="checkbox"
-                       value="{{ item['id'] }}">
-                <label class="govuk-label govuk-checkboxes__label" for="{{ name }}-{{ item['id'] }}">
-                    {{ item['name'] }}
-                </label>
+        <div class="scrollable-checkboxes">
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+                {% for item in items %}
+                {% if item %}
+                <div class="govuk-checkboxes__item">
+                    <input class="govuk-checkboxes__input" id="{{ name }}-{{ item['id'] }}" name="{{ name }}" type="checkbox"
+                        value="{{ item['id'] }}">
+                    <label class="govuk-label govuk-checkboxes__label" for="{{ name }}-{{ item['id'] }}">
+                        {{ item['name'] }}
+                    </label>
+                </div>
+                {%- endif -%}
+                {%- endfor -%}
             </div>
-            {%- endif -%}
-            {%- endfor -%}
         </div>
     </fieldset>
 </div>