Use crm-checkbox-list styling in display prefs tpl

diff --git a/css/civicrm.css b/css/civicrm.css
index fe2864a6ebefd2653c3b802fdd22511e1566f521..128a8812e1189e60e7812146043cc4ef08cb1ec7 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3237,6 +3237,7 @@ span.crm-select-item-color {
   background-color: white;
   border: 1px solid #a5a5a5;
   width: 300px;
+  max-width: 100%;
   max-height: 300px;
   overflow-y: auto;
 }

diff --git a/templates/CRM/Admin/Form/Preferences/Display.tpl b/templates/CRM/Admin/Form/Preferences/Display.tpl
index 9a7cb227aa105aae0015139be8caeae5d0298a8c..0aa794a4a46577a8f765ed4a4564e8d19fb85159 100644 (file)
--- a/templates/CRM/Admin/Form/Preferences/Display.tpl
+++ b/templates/CRM/Admin/Form/Preferences/Display.tpl
@@ -60,35 +60,30 @@
           <tr>
             <td style="width:30%">
               <span class="label"><strong>{ts}Individual Name Fields{/ts}</strong></span>
-              <ul id="contactEditNameFields">
+              <ul id="contactEditNameFields" class="crm-checkbox-list">
                 {foreach from=$nameFields item="title" key="opId"}
-                  <li id="preference-{$opId}-contactedit" class="ui-state-default ui-corner-all"
-                      style="padding-left:1px;">
-                    <span>{$form.contact_edit_options.$opId.html}</span>
+                  <li id="preference-{$opId}-contactedit">
+                    {$form.contact_edit_options.$opId.html}
                   </li>
                 {/foreach}
               </ul>
             </td>
             <td style="width:30%">
               <span class="label"><strong>{ts}Contact Details{/ts}</strong></span>
-              <ul id="contactEditBlocks">
+              <ul id="contactEditBlocks" class="crm-checkbox-list crm-sortable-list">
                 {foreach from=$contactBlocks item="title" key="opId"}
-                  <li id="preference-{$opId}-contactedit" class="ui-state-default ui-corner-all"
-                      style="padding-left:1px;">
-                    <i class='crm-i fa-arrows crm-grip' style="float:left;"></i>
-                    <span>{$form.contact_edit_options.$opId.html}</span>
+                  <li id="preference-{$opId}-contactedit">
+                    {$form.contact_edit_options.$opId.html}
                   </li>
                 {/foreach}
               </ul>
             </td>
-            <td>
+            <td style="width:30%">
               <span class="label"><strong>{ts}Other Panes{/ts}</strong></span>
-              <ul id="contactEditOptions">
+              <ul id="contactEditOptions"  class="crm-checkbox-list crm-sortable-list">
                 {foreach from=$editOptions item="title" key="opId"}
-                  <li id="preference-{$opId}-contactedit" class="ui-state-default ui-corner-all"
-                      style="padding-left:1px;">
-                    <i class='crm-i fa-arrows crm-grip' style="float:left;"></i>
-                    <span>{$form.contact_edit_options.$opId.html}</span>
+                  <li id="preference-{$opId}-contactedit">
+                    {$form.contact_edit_options.$opId.html}
                   </li>
                 {/foreach}
               </ul>
@@ -267,10 +262,7 @@
           $('#user_dashboard_options_' + invoicesKey).attr("disabled", true);
         }
 
-        $("#contactEditBlocks, #contactEditOptions").sortable({
-          placeholder: 'ui-state-highlight',
-          update: getSorting
-        });
+        $("#contactEditBlocks, #contactEditOptions").on('sortupdate', getSorting);
 
         function showCKEditorConfig() {
           $('.crm-preferences-display-form-block-editor_id .crm-button').toggle($(this).val() == 'CKEditor');