added wrapping div to align width of input & autosuggest results (#2756)

ONSdigital · Jul 25, 2023 · bdbef0f · bdbef0f
1 parent ab2a83c
commit bdbef0f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/src/components/autosuggest/_autosuggest.scss b/src/components/autosuggest/_autosuggest.scss
@@ -91,6 +91,11 @@
     }
   }
 
+  &__wrapper {
+    max-width: max-content;
+    width: 100%;
+  }
+
   &__panel.ons-panel--warn {
     background: none;
     border: 0;

diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk
@@ -43,31 +43,32 @@
             <div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
             <div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
+        <div class="ons-autosuggest__wrapper">
+            {{ onsInput({
+                "id": params.id,
+                "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
+                "width": params.width,
+                "label": {
+                    "text": params.label.text,
+                    "description": params.label.description,
+                    "id": params.label.id,
+                    "classes": params.label.classes
+                },
+                "autocomplete": params.autocomplete,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "value": params.value,
+                "attributes": params.attributes,
+                "error": params.error,
+                "mutuallyExclusive": params.mutuallyExclusive,
+                "accessiblePlaceholder": params.accessiblePlaceholder,
+                "name": params.name,
+                "autosuggestResults": autosuggestResults
+            }) }}
 
-        {{ onsInput({
-            "id": params.id,
-            "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
-            "width": params.width,
-            "label": {
-                "text": params.label.text,
-                "description": params.label.description,
-                "id": params.label.id,
-                "classes": params.label.classes
-            },
-            "autocomplete": params.autocomplete,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "value": params.value,
-            "attributes": params.attributes,
-            "error": params.error,
-            "mutuallyExclusive": params.mutuallyExclusive,
-            "accessiblePlaceholder": params.accessiblePlaceholder,
-            "name": params.name,
-            "autosuggestResults": autosuggestResults
-         }) }}
-
-         {% if not params.mutuallyExclusive %}
-            {{ autosuggestResults | safe }}
-         {% endif %}
+            {% if not params.mutuallyExclusive %}
+                {{ autosuggestResults | safe }}
+            {% endif %}
+         </div>
     </div>
 {% endmacro %}