[BUGFIX] Fix rendering of select icons

Use floating divs for the select icons instead of
a table with a fixed column count of 12.

Resolves: #79508
Releases: master
Change-Id: I4b4f485753ca33aa71d5c533b437e518da2096ed
Reviewed-on: https://review.typo3.org/51983

Reviewed-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Thomas Hohn <thomas@hohn.dk>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>

Build/Resources/Public/Less/TYPO3/_element_tceforms.less

@@ -273,9 +273,22 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 	color: #004fb0;
 }
 
-.table-icons {
-	td img {
+.icon-list {
+	background: #fff;
+	margin-top: 9px;
+	border: 1px solid @table-border-color;
+
+	.row {
+		margin:0;
+	}
+
+	.item {
+		&:extend(.pull-left);
+		padding:6px;
 		max-width: 128px;
-		max-height: 128px;
+		img {
+			max-width: 128px;
+			max-height: 128px;
+		}
 	}
 }

typo3/sysext/backend/Classes/Form/FieldWizard/SelectIcons.php

@@ -55,26 +55,18 @@ class SelectIcons extends AbstractNode
 
         $html = [];
         if (!empty($selectIcons)) {
-            $html[] = '<div class="t3js-forms-select-single-icons table-icons table-fit table-fit-inline-block">';
-            $html[] =    '<table class="table table-condensed table-white table-center">';
-            $html[] =        '<tbody>';
-            $html[] =            '<tr>';
+            $html[] = '<div class="t3js-forms-select-single-icons icon-list">';
+            $html[] =    '<div class="row">';
             foreach ($selectIcons as $i => $selectIcon) {
-                if ($i % 12 === 0 && $i !== 0) {
-                    $html[] =    '</tr>';
-                    $html[] =    '<tr>';
-                }
-                $html[] =            '<td>';
+                $html[] =   '<div class="item">';
                 if (is_array($selectIcon)) {
                     $html[] = '<a href="#" title="' . htmlspecialchars($selectIcon['title'], ENT_COMPAT, 'UTF-8', false) . '" data-select-index="' . htmlspecialchars((string)$selectIcon['index']) . '">';
                     $html[] =   $selectIcon['icon'];
                     $html[] = '</a>';
                 }
-                $html[] =            '</td>';
+                $html[] =   '</div>';
             }
-            $html[] =            '</tr>';
-            $html[] =        '</tbody>';
-            $html[] =    '</table>';
+            $html[] =    '</div>';
             $html[] = '</div>';
         }
 

typo3/sysext/backend/Resources/Public/Css/backend.css

@@ -272,7 +272,8 @@ th {
   float: right;
 }
 .pull-left,
-#typo3-docheader .left {
+#typo3-docheader .left,
+.icon-list .item {
   float: left;
 }
 .fa.pull-left {
@@ -8470,7 +8471,8 @@ div.dropdown-menu {
   float: right !important;
 }
 .pull-left,
-#typo3-docheader .left {
+#typo3-docheader .left,
+.icon-list .item {
   float: left !important;
 }
 .hide {
@@ -11844,7 +11846,19 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 .t3-form-field-label.t3-form-field-state-changed {
   color: #004fb0;
 }
-.table-icons td img {
+.icon-list {
+  background: #fff;
+  margin-top: 9px;
+  border: 1px solid #ccc;
+}
+.icon-list .row {
+  margin: 0;
+}
+.icon-list .item {
+  padding: 6px;
+  max-width: 128px;
+}
+.icon-list .item img {
   max-width: 128px;
   max-height: 128px;
 }