Fix docker folder row vertical centering in fixed table layout

Author: alexphillips-dev

archive/folderview.plus-2026.03.07.7.txz

@@ -6,13 +6,24 @@
 <!ENTITY launch "Settings/FolderViewPlus">
 <!ENTITY plugdir "/usr/local/emhttp/plugins/&name;">
 <!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/main/folderview.plus.plg">
-<!ENTITY version "2026.03.07.6">
-<!ENTITY md5 "d1e68142243a2b2e574d2ccb928dc34e">
+<!ENTITY version "2026.03.07.8">
+<!ENTITY md5 "afea9c4354cc2b161a80161aecc791dd">
 ]>
 
 <PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" icon="folder-open-o" support="https://github.com/alexphillips-dev/FolderView-Plus/issues" min="7.0.0">
     <CHANGES>
 
+###2026.03.07.8
+- Fix Docker folder row vertical alignment in fixed/clone table layouts:
+  - widen centering selectors to all folder rows instead of only `#docker_list`,
+  - apply runtime centering styles to every matching folder row copy after render.
+
+###2026.03.07.7
+- Add runtime-enforced Docker folder row alignment fallback in `docker.js`:
+  - apply inline `vertical-align: middle !important` to folder row cells after render,
+  - force left folder cell content block to centered positioning after insertion and after full folder build.
+- Keep CSS centering rules in place, with JS fallback overriding any theme/custom style collisions.
+
 ###2026.03.07.6
 - Rework Docker folder left-cell vertical centering using explicit in-cell absolute centering, avoiding inherited top alignment from Unraid table styles.
 

archive/folderview.plus-2026.03.07.8.txz

@@ -56,6 +56,50 @@ if (FOLDER_VIEW_DEBUG_MODE) {
     console.log('[FV3_DEBUG] docker.js loaded. FOLDER_VIEW_DEBUG_MODE is ON.');
 }
 
+const escapeClassToken = (value) => {
+    const input = String(value);
+    if (window.CSS && typeof window.CSS.escape === 'function') {
+        return window.CSS.escape(input);
+    }
+    return input.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+};
+
+const forceFolderRowVerticalCenter = (id) => {
+    const escapedId = escapeClassToken(id);
+    const rows = Array.from(document.querySelectorAll(`tr.folder.folder-id-${escapedId}`));
+    if (!rows.length) {
+        return;
+    }
+
+    rows.forEach((row) => {
+        Array.from(row.children).forEach((td) => {
+            if (td && td.tagName === 'TD') {
+                td.style.setProperty('vertical-align', 'middle', 'important');
+            }
+        });
+
+        const cell = row.querySelector('td.ct-name.folder-name');
+        if (!cell) {
+            return;
+        }
+        cell.style.setProperty('position', 'relative', 'important');
+        cell.style.setProperty('padding-top', '0px', 'important');
+        cell.style.setProperty('padding-bottom', '0px', 'important');
+
+        const sub = cell.querySelector('.folder-name-sub');
+        if (!sub) {
+            return;
+        }
+        sub.style.setProperty('position', 'absolute', 'important');
+        sub.style.setProperty('top', '50%', 'important');
+        sub.style.setProperty('left', '8px', 'important');
+        sub.style.setProperty('right', '8px', 'important');
+        sub.style.setProperty('transform', 'translateY(-50%)', 'important');
+        sub.style.setProperty('display', 'flex', 'important');
+        sub.style.setProperty('align-items', 'center', 'important');
+    });
+};
+
 /**
  * Handles the creation of all folders
  */
@@ -224,6 +268,11 @@ const createFolders = async () => {
     globalFolders = foldersDone;
     if (FOLDER_VIEW_DEBUG_MODE) console.log('[FV3_DEBUG] createFolders: Assigned foldersDone to globalFolders:', {...globalFolders});
 
+    Object.keys(globalFolders).forEach((folderId) => forceFolderRowVerticalCenter(folderId));
+    setTimeout(() => {
+        Object.keys(globalFolders).forEach((folderId) => forceFolderRowVerticalCenter(folderId));
+    }, 50);
+
     folderDebugMode = false; // Existing flag
     if (FOLDER_VIEW_DEBUG_MODE) console.log('[FV3_DEBUG] createFolders: Set folderDebugMode (existing) to false.');
 
@@ -376,6 +425,7 @@ const createFolder = (folder, id, positionInMainOrder, liveOrderArray, container
              $('#docker_list').append($(fld));
         }
     }
+    forceFolderRowVerticalCenter(id);
 
     // NOTE: switchButton initialization is deferred until after autostart state is known (see below).
     // This avoids the bug where initializing with checked:false then clicking ON could

folderview.plus.plg

@@ -28,19 +28,19 @@
 }
 
 /* Keep folder rows vertically centered against the preview row content */
-#docker_list > tr.sortable.folder > td {
+tr.folder > td {
     vertical-align: middle !important;
 }
 
 /* Unraid table styles can force top visual placement.
    Center the left folder block explicitly within the row height. */
-#docker_list > tr.sortable.folder > td.ct-name.folder-name {
+tr.folder > td.ct-name.folder-name {
     position: relative;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
 
-#docker_list > tr.sortable.folder > td.ct-name.folder-name > .folder-name-sub {
+tr.folder > td.ct-name.folder-name > .folder-name-sub {
     position: absolute;
     top: 50%;
     left: 8px;