From 0994aac656ef3d136bae0e5e83ba196c0f5b39b7 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Sun, 27 Jan 2019 14:38:27 +0100
Subject: [PATCH] Restructure markup to ensure the label text is properly
 wrapped and make sure it all aligns nicely on small breakpoints too

---
 .../less/components/umb-checkbox-list.less    | 19 +++++++++++++------
 .../checkboxlist/checkboxlist.html            |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
index 6b3b5946c0..b22bce91b4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
@@ -6,6 +6,12 @@
   margin-left: 0;
 }
 
+.umb-checkboxlist{
+    ul{
+        float: left;
+    }
+}
+
 .umb-checkbox-list__item {
   display: flex;
   align-items: center;
@@ -78,12 +84,15 @@
     }
 
     &__label{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
         position: relative;
         padding: 0;
         margin: 0;
 
         &-text{
-            margin: 0 0 0 10px;
+            margin: 0 0 0 26px;
             position: relative;
             top: 2px;
         }
@@ -112,12 +121,10 @@
     }
 
     &__state{
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
         height: 17px;
-        position: relative;
-        left: 1px;
+        position: absolute;
+        top: 2px;
+        left: 0;
     }
 
     &__check{
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
index 27794efbab..ef11948a3c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
@@ -13,8 +13,8 @@
                     <div class="umb-checkboxlist__check">
                         <i class="umb-checkboxlist__icon icon-check" aria-hidden="true"></i>
                     </div>
-                    <span class="umb-checkboxlist__label-text">{{item.val}}</span>
                 </div>
+                <span class="umb-checkboxlist__label-text">{{item.val}}</span>
             </label>
         </li>
     </ul>