Make the select boxes full size

One of the changes the new Frontend version introduces[1] is the lack of the full size select boxes by default. In order to keep up with the design as much as possible, we're adding the extra class to force these expand as they use to. [1]: alphagov/govuk-frontend#960
alphagov · Oct 11, 2018 · ddf1ae9 · ddf1ae9
1 parent 3a1828a
commit ddf1ae9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/calculator/calculator.njk b/src/components/calculator/calculator.njk
@@ -53,6 +53,7 @@
                       {{ govukSelect({
                         id: "service-" + serviceName + "-" + version,
                         name: "items[" + state.items.length + "][planGUID]",
+                        classes: "govuk-!-width-full",
                         items: plans | map({
                           text: "variant",
                           value: "planGUID"
@@ -67,6 +68,7 @@
                           {{ govukSelect({
                             id: "nodes-" + serviceName + "-" + version,
                             name: "items[" + state.items.length + "][numberOfNodes]",
+                            classes: "govuk-!-width-full",
                             items: [
                               {text: "1 Instance", value: "1"},
                               {text: "2 Instances", value: "2"},
@@ -84,6 +86,7 @@
                           {{ govukSelect({
                             id: "mem-" + serviceName + "-" + version,
                             name: "items[" + state.items.length + "][memoryInMB]",
+                            classes: "govuk-!-width-full",
                             items: [
                               {text: "64 MB", value: "64"},
                               {text: "128 MB", value: "128"},

diff --git a/src/components/statements/statements.njk b/src/components/statements/statements.njk
@@ -41,21 +41,21 @@
             </tr>
             <tr>
               <td class="govuk-table__cell">
-                <select class="govuk-select" id="rangeStart" name="rangeStart">
+                <select class="govuk-select govuk-!-width-full" id="rangeStart" name="rangeStart">
                   {% for rangeStart, rangeTitle in listOfPastYearMonths %}
                     <option value="{{ rangeStart }}" {% if filterMonth == rangeStart  %}selected{% endif %}>{{ rangeTitle }}</option>
                   {% endfor %}
                 </select>
               </td>
               <td class="govuk-table__cell">
-                <select class="govuk-select" id="space" name="space">
+                <select class="govuk-select govuk-!-width-full" id="space" name="space">
                   {% for space in spaces %}
                     <option value="{{ space.guid }}" {% if filterSpace.guid == space.guid %}selected{% endif %}> {{ space.name }}</option>
                   {% endfor %}
                 </select>
               </td>
               <td class="govuk-table__cell">
-                <select class="govuk-select" id="service" name="service">
+                <select class="govuk-select govuk-!-width-full" id="service" name="service">
                   {% for plan in plans %}
                     <option value="{{ plan.guid }}" {% if filterService.guid == plan.guid %}selected{% endif %}>{{ plan.name }}</option>
                   {% endfor %}