From 28d4f1cc44dc9a13ccfe7242a66a5f9e5785edfc Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@oerskov.dk>
Date: Sun, 3 Mar 2019 20:18:41 +0100
Subject: [PATCH] Fix issues where table cells collapse when sorting doctypes
 in Nested Content config

---
 .../nestedcontent/nestedcontent.controller.js | 30 ++++++++++++++++++-
 .../nestedcontent.doctypepicker.html          |  3 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
index 0d24f9d1cc..b79591c852 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
@@ -23,7 +23,35 @@
         $scope.sortableOptions = {
             axis: 'y',
             cursor: "move",
-            handle: ".icon-navigation"
+            handle: ".handle",
+            placeholder: 'sortable-placeholder',
+            forcePlaceholderSize: true,
+            helper: function (e, ui) {
+                // When sorting table rows, the cells collapse. This helper fixes that: https://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
+                ui.children().each(function () {
+                    $(this).width($(this).width());
+                });
+                return ui;
+            },
+            start: function (e, ui) {
+
+                var cellHeight = ui.item.height();
+
+                // Build a placeholder cell that spans all the cells in the row: https://stackoverflow.com/questions/25845310/jquery-ui-sortable-and-table-cell-size
+                var cellCount = 0;
+                $('td, th', ui.helper).each(function () {
+                    // For each td or th try and get it's colspan attribute, and add that or 1 to the total
+                    var colspan = 1;
+                    var colspanAttr = $(this).attr('colspan');
+                    if (colspanAttr > 1) {
+                        colspan = colspanAttr;
+                    }
+                    cellCount += colspan;
+                });
+
+                // Add the placeholder UI - note that this is the item's content, so td rather than tr - and set height of tr
+                ui.placeholder.html('<td colspan="' + cellCount + '"></td>').height(cellHeight);
+            }
         };
 
         $scope.docTypeTabs = {};
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
index e0a16d8687..48e75cbeda 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
@@ -18,7 +18,8 @@
             </thead>
             <tbody ui-sortable="sortableOptions" ng-model="model.value">
                 <tr ng-repeat="config in model.value">
-                    <td class="icon icon-navigation">
+                    <td>
+                        <i class="icon icon-navigation handle"></i>
                     </td>
                     <td>
                         <select id="{{model.alias}}_doctype_select"