[#PAB-508]: add scrollable checkboxes

.. ..
communitiesuk · Jul 28, 2023 · 27ad11a · 27ad11a
1 parent ebb9f1b
commit 27ad11a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git 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
@@ -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>