Fix single checkbox bug (#80)

rooseveltframework · Sep 19, 2024 · f49f1f7 · f49f1f7
1 parent 4139ccf
commit f49f1f7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Next version
 
-- Put your changes here...
+- Fixed a visual bug that occurred when single checkbox elements had extra elements included.
 
 ## 4.0.1
 

diff --git a/semanticForms.css b/semanticForms.css
diff --git a/semanticForms.js b/semanticForms.js
@@ -48,6 +48,7 @@ window.semanticForms = () => {
               input.parentNode.classList.add('singleCheckbox')
               newLabel.className = ''
               label.setAttribute('hidden', 'hidden')
+              insertAfter(newLabel, input)
             }
 
             newLabel.innerHTML = label.innerHTML

diff --git a/semanticForms.scss b/semanticForms.scss
@@ -92,7 +92,6 @@ form.semanticForms {
         background: var(--nestedInput);
       }
     }
-
   }
 
   dl {
@@ -105,14 +104,23 @@ form.semanticForms {
       position: relative;
 
       &:not(.checkboxes, .radios) {
-        display: flex;
         gap: 10px;
         max-width: 100%;
 
         // places all items within the <dd> horizontally
         &:not(.singleCheckbox) {
+          display: flex;
           flex-direction: column;
         }
+
+        &.singleCheckbox {
+          display: grid;
+          grid-template-columns: min-content 1fr;
+
+          & > :not(input[type='checkbox'], label) {
+            grid-column: 1 / -1;
+          }
+        }
       }
 
       &.checkboxes ul, &.radios ul {