fix(storefront): BCTHEME-356 Required checkbox message blocks the che…

…ckbox (#1963)
bigcommerce · Feb 2, 2021 · 511f333 · 511f333
1 parent 5e957f5
commit 511f333
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+- Fixed required checkbox message displaying. [1963](https://github.com/bigcommerce/cornerstone/pull/1963)
+
 ## Draft
 - If multiple Pick List Options are applied, customers cannot select "none" on both. [#1975](https://github.com/bigcommerce/cornerstone/pull/1975)
 - Moved phrase from compare.html to en.json for increasing localization. [#1972](https://github.com/bigcommerce/cornerstone/pull/1972)

diff --git a/templates/components/amp/products/options/input-checkbox.html b/templates/components/amp/products/options/input-checkbox.html
@@ -6,13 +6,15 @@
             <small>{{lang 'common.required'}}</small>
         {{/if}}
     </label>
-    <input
-        class="form-checkbox"
-        type="checkbox"
-        name="attribute[{{id}}]"
-        id="attribute-{{id}}"
-        value="{{value}}"
-        {{#if checked}}checked{{/if}}
-        {{#if required}}required{{/if}}>
-    <label class="form-label {{class}}" for="attribute-{{id}}">{{label}}</label>
+    <div class="form-option-wrapper">
+        <input
+            class="form-checkbox"
+            type="checkbox"
+            name="attribute[{{id}}]"
+            id="attribute-{{id}}"
+            value="{{value}}"
+            {{#if checked}}checked{{/if}}
+            {{#if required}}required{{/if}}>
+        <label class="form-label {{class}}" for="attribute-{{id}}">{{label}}</label>
+    </div>
 </div>
diff --git a/templates/components/products/options/input-checkbox.html b/templates/components/products/options/input-checkbox.html
@@ -5,17 +5,19 @@
         {{> components/common/requireness-msg}}
     </label>
     <input type="hidden" name="attribute[{{id}}]" value="{{noValue}}" />
-    <input
-        class="form-checkbox"
-        type="checkbox"
-        name="attribute[{{id}}]"
-        id="attribute-check-{{id}}"
-        value="{{value}}"
-        {{#if checked}}
-            checked
-            data-default
-        {{/if}}
-        {{#if required}}required{{/if}}>
+    <div class="form-option-wrapper">
+        <input
+            class="form-checkbox"
+            type="checkbox"
+            name="attribute[{{id}}]"
+            id="attribute-check-{{id}}"
+            value="{{value}}"
+            {{#if checked}}
+                checked
+                data-default
+            {{/if}}
+            {{#if required}}required{{/if}}>
 
-    <label class="form-label {{class}}" for="attribute-check-{{id}}">{{label}}</label>
+        <label class="form-label {{class}}" for="attribute-check-{{id}}">{{label}}</label>
+    </div>
 </div>