@liedekef/ftable 1.1.49 → 1.1.50

package/ftable.umd.js

@@ -1453,12 +1453,9 @@ class FTableFormBuilder {
             parent: display
         });
 
-        // Create options dropdown
-        const dropdown = FTableDOMHelper.create('div', {
-            className: 'ftable-multiselect-dropdown',
-            parent: container,
-            style: 'display: none;'
-        });
+        // Dropdown and overlay will be created on demand and appended to body
+        let dropdown = null;
+        let dropdownOverlay = null;
 
         // Store selected values and checkbox references
         const selectedValues = new Set(
@@ -1526,9 +1523,53 @@ class FTableFormBuilder {
             hiddenInput.value = Array.from(selectedValues).join(',');
         };
 
+        // Function to close dropdown
+        const closeDropdown = () => {
+            if (dropdown) {
+                dropdown.remove();
+                dropdown = null;
+            }
+            if (dropdownOverlay) {
+                dropdownOverlay.remove();
+                dropdownOverlay = null;
+            }
+            if (container._cleanupHandlers) {
+                container._cleanupHandlers();
+                container._cleanupHandlers = null;
+            }
+        };
+
+        // Function to position dropdown
+        const positionDropdown = () => {
+            if (!dropdown) return;
+
+            const rect = display.getBoundingClientRect();
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+            let left = rect.left + scrollLeft;
+            let top = rect.bottom + scrollTop + 4; // 4px gap
+
+            dropdown.style.position = 'absolute';
+            dropdown.style.left = `${left}px`;
+            dropdown.style.top = `${top}px`;
+            dropdown.style.width = `${rect.width}px`;
+            dropdown.style.minWidth = `${rect.width}px`;
+            dropdown.style.boxSizing = 'border-box';
+            dropdown.style.zIndex = '10000';
+
+            // Adjust horizontal position if needed
+	    const dropdownRect = dropdown.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            if (dropdownRect.right > viewportWidth) {
+                left = Math.max(10, viewportWidth - dropdownRect.width - 10);
+                dropdown.style.left = `${left}px`;
+            }
+        };
+
         // Populate options
         const populateOptions = () => {
-            if (!field.options) return;
+            if (!field.options || !dropdown) return;
             
             const options = Array.isArray(field.options) ? field.options : 
                 Object.entries(field.options).map(([k, v]) => ({Value: k, DisplayText: v}));
@@ -1585,26 +1626,74 @@ class FTableFormBuilder {
         // Toggle dropdown
         const toggleDropdown = (e) => {
             if (e) e.stopPropagation();
-            const isVisible = dropdown.style.display !== 'none';
-            dropdown.style.display = isVisible ? 'none' : 'block';
             
-            if (!isVisible) {
-                // Close other dropdowns
-                document.querySelectorAll('.ftable-multiselect-dropdown').forEach(dd => {
-                    if (dd !== dropdown) dd.style.display = 'none';
+            if (dropdown) {
+                // Dropdown is open, close it
+                closeDropdown();
+            } else {
+                // Close any other open multiselect dropdowns
+                document.querySelectorAll('.ftable-multiselect-dropdown').forEach(dd => dd.remove());
+                document.querySelectorAll('.ftable-multiselect-overlay').forEach(ov => ov.remove());
+
+                // Create overlay
+                dropdownOverlay = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-overlay',
+                    parent: document.body
+                });
+
+                // Create dropdown
+                dropdown = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-dropdown',
+                    parent: document.body
                 });
+
+                // Populate options
+                populateOptions();
+
+                // Position dropdown
+                positionDropdown();
+
+                // Handle clicks outside
+                dropdownOverlay.addEventListener('click', (event) => {
+                    if (event.target === dropdownOverlay) {
+                        closeDropdown();
+                    }
+                });
+
+                // Reposition on scroll/resize
+                const repositionHandler = () => positionDropdown();
+                window.addEventListener('scroll', repositionHandler, true);
+                window.addEventListener('resize', repositionHandler);
+
+                // Store cleanup function
+                container._cleanupHandlers = () => {
+                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('resize', repositionHandler);
+                };
             }
         };
 
         display.addEventListener('click', toggleDropdown);
         toggleBtn.addEventListener('click', toggleDropdown);
 
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!container.contains(e.target)) {
-                dropdown.style.display = 'none';
-            }
+        // Clean up when container is removed from DOM
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.removedNodes.forEach((node) => {
+                    if (node === container || node.contains && node.contains(container)) {
+                        closeDropdown();
+                        observer.disconnect();
+                    }
+                });
+            });
         });
+        
+        // Start observing once container is in the DOM
+        setTimeout(() => {
+            if (container.parentNode) {
+                observer.observe(container.parentNode, { childList: true, subtree: true });
+            }
+        }, 0);
 
         // Initialize
         populateOptions();
@@ -1932,9 +2021,6 @@ class FTable extends FTableEventEmitter {
         this.updateSortingHeaders();
         this.renderSortingInfo();
 
-        // Add essential CSS if not already present
-        //this.addEssentialCSS();
-
         // now make sure all tables have a % width
         this.initColumnWidths();
     }
@@ -2014,40 +2100,6 @@ class FTable extends FTableEventEmitter {
         return result;
     }
 
-    addEssentialCSS() {
-        // Check if our CSS is already added
-        if (document.querySelector('#ftable-essential-css')) return;
-        
-        const css = `
-            .ftable-row-animation {
-                transition: background-color 0.3s ease;
-            }
-
-            .ftable-row-added {
-                background-color: #d4edda !important;
-            }
-
-            .ftable-row-edited {
-                background-color: #d1ecf1 !important;
-            }
-
-            .ftable-row-deleted {
-                opacity: 0;
-                transform: translateY(-10px);
-                transition: opacity 0.3s ease, transform 0.3s ease;
-            }
-
-            .ftable-toolbarsearch {
-                width: 90%;
-            }
-        `;
-
-        const style = document.createElement('style');
-        style.id = 'ftable-essential-css';
-        style.textContent = css;
-        document.head.appendChild(style);
-    }
-
     createPagingUI() {
         this.elements.bottomPanel = FTableDOMHelper.create('div', {
             className: 'ftable-bottom-panel',
@@ -2704,12 +2756,9 @@ class FTable extends FTableEventEmitter {
             parent: display
         });
 
-        // Create options dropdown
-        const dropdown = FTableDOMHelper.create('div', {
-            className: 'ftable-multiselect-dropdown',
-            parent: container,
-            style: 'display: none;'
-        });
+        // Dropdown and overlay will be created on demand and appended to body
+        let dropdown = null;
+        let dropdownOverlay = null;
 
         // Store selected values and checkbox references
         const selectedValues = new Set();
@@ -2776,18 +2825,53 @@ class FTable extends FTableEventEmitter {
             }
         };
 
-        // Add reset method to container
-        container.resetMultiSelect = () => {
-            selectedValues.clear();
-            checkboxMap.forEach(checkbox => {
-                checkbox.checked = false;
-            });
-            updateDisplay();
+        // Function to close dropdown
+        const closeDropdown = () => {
+            if (dropdown) {
+                dropdown.remove();
+                dropdown = null;
+            }
+            if (dropdownOverlay) {
+                dropdownOverlay.remove();
+                dropdownOverlay = null;
+            }
+            if (container._cleanupHandlers) {
+                container._cleanupHandlers();
+                container._cleanupHandlers = null;
+            }
+        };
+
+        // Function to position dropdown
+        const positionDropdown = () => {
+            if (!dropdown) return;
+
+            const rect = display.getBoundingClientRect();
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+            let left = rect.left + scrollLeft;
+            let top = rect.bottom + scrollTop + 4; // 4px gap
+
+            dropdown.style.position = 'absolute';
+            dropdown.style.left = `${left}px`;
+            dropdown.style.top = `${top}px`;
+            dropdown.style.width = `${rect.width}px`;
+            dropdown.style.minWidth = `${rect.width}px`;
+            dropdown.style.boxSizing = 'border-box';
+            dropdown.style.zIndex = '10000';
+
+            // Adjust horizontal position if needed
+	    const dropdownRect = dropdown.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            if (dropdownRect.right > viewportWidth) {
+                left = Math.max(10, viewportWidth - dropdownRect.width - 10);
+                dropdown.style.left = `${left}px`;
+            }
         };
 
         // Populate options in both hidden select and dropdown
         const populateOptions = () => {
-            if (!optionsSource) return;
+            if (!optionsSource || !dropdown) return;
             
             const options = Array.isArray(optionsSource) ? optionsSource : 
                 Object.entries(optionsSource).map(([k, v]) => ({Value: k, DisplayText: v}));
@@ -2803,12 +2887,14 @@ class FTable extends FTableEventEmitter {
 
                 const optText = option.DisplayText || option.text || option;
 
-                // Add to hidden select
-                FTableDOMHelper.create('option', {
-                    value: optValue,
-                    textContent: optText,
-                    parent: hiddenSelect
-                });
+                // Add to hidden select (only once)
+                if (!hiddenSelect.querySelector(`option[value="${optValue}"]`)) {
+                    FTableDOMHelper.create('option', {
+                        value: optValue,
+                        textContent: optText,
+                        parent: hiddenSelect
+                    });
+                }
                 
                 // Add to visual dropdown
                 const optionDiv = FTableDOMHelper.create('div', {
@@ -2822,6 +2908,9 @@ class FTable extends FTableEventEmitter {
                     parent: optionDiv
                 });
                 
+                // Set initial checked state
+                checkbox.checked = selectedValues.has(optValue.toString());
+                
                 // Store checkbox reference
                 checkboxMap.set(optValue.toString(), checkbox);
                 
@@ -2851,29 +2940,86 @@ class FTable extends FTableEventEmitter {
         // Toggle dropdown
         const toggleDropdown = (e) => {
             if (e) e.stopPropagation();
-            const isVisible = dropdown.style.display !== 'none';
-            dropdown.style.display = isVisible ? 'none' : 'block';
             
-            if (!isVisible) {
-                // Close other dropdowns
-                document.querySelectorAll('.ftable-multiselect-dropdown').forEach(dd => {
-                    if (dd !== dropdown) dd.style.display = 'none';
+            if (dropdown) {
+                // Dropdown is open, close it
+                closeDropdown();
+            } else {
+                // Close any other open multiselect dropdowns
+                document.querySelectorAll('.ftable-multiselect-dropdown').forEach(dd => dd.remove());
+                document.querySelectorAll('.ftable-multiselect-overlay').forEach(ov => ov.remove());
+
+                // Create overlay
+                dropdownOverlay = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-overlay',
+                    parent: document.body
                 });
+
+                // Create dropdown
+                dropdown = FTableDOMHelper.create('div', {
+                    className: 'ftable-multiselect-dropdown',
+                    parent: document.body
+                });
+
+                // Populate options
+                populateOptions();
+
+                // Position dropdown
+                positionDropdown();
+
+                // Handle clicks outside
+                dropdownOverlay.addEventListener('click', (event) => {
+                    if (event.target === dropdownOverlay) {
+                        closeDropdown();
+                    }
+                });
+
+                // Reposition on scroll/resize
+                const repositionHandler = () => positionDropdown();
+                window.addEventListener('scroll', repositionHandler, true);
+                window.addEventListener('resize', repositionHandler);
+
+                // Store cleanup function
+                container._cleanupHandlers = () => {
+                    window.removeEventListener('scroll', repositionHandler, true);
+                    window.removeEventListener('resize', repositionHandler);
+                };
             }
         };
 
         display.addEventListener('click', toggleDropdown);
         toggleBtn.addEventListener('click', toggleDropdown);
 
-        // Close dropdown when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!container.contains(e.target)) {
-                dropdown.style.display = 'none';
-            }
+        // Add reset method to container
+        container.resetMultiSelect = () => {
+            selectedValues.clear();
+            checkboxMap.forEach(checkbox => {
+                checkbox.checked = false;
+            });
+            closeDropdown();
+            updateDisplay();
+        };
+
+        // Clean up when container is removed from DOM
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.removedNodes.forEach((node) => {
+                    if (node === container || node.contains && node.contains(container)) {
+                        closeDropdown();
+                        observer.disconnect();
+                    }
+                });
+            });
         });
+        
+        // Start observing once container is in the DOM
+        setTimeout(() => {
+            if (container.parentNode) {
+                observer.observe(container.parentNode, { childList: true, subtree: true });
+            }
+        }, 0);
 
         // Initialize
-        populateOptions();
         updateDisplay();
 
         return container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liedekef/ftable",
-  "version": "1.1.49",
+  "version": "1.1.50",
   "description": "Modern, lightweight, jQuery-free CRUD table for dynamic AJAX-powered tables.",
   "main": "ftable.js",
   "module": "ftable.esm.js",

package/themes/basic/ftable_basic.css

@@ -425,6 +425,17 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
   position: relative;
   display: inline-block;
   width: 100%;
+  min-width: 200px;
+}
+/* Overlay for closing dropdown when clicking outside */
+.ftable-multiselect-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 9999;
 }
 .ftable-multiselect-display {
   display: flex;
@@ -440,10 +451,6 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
 .ftable-multiselect-display:hover {
   border-color: #999;
 }
-.ftable-multiselect-display:focus-within {
-  border-color: #4CAF50;
-  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
-}
 .ftable-multiselect-selected {
   display: flex;
   flex-wrap: wrap;
@@ -453,7 +460,6 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
 }
 .ftable-multiselect-placeholder {
   color: #555;
-  font-weight: normal;
 }
 .ftable-multiselect-tag {
   display: inline-flex;
@@ -504,13 +510,14 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
   color: #333;
 }
 .ftable-multiselect-dropdown {
-  position: relative;
+  /* Position is set dynamically via JavaScript */
   background: white;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-height: 200px;
   overflow-y: auto;
+  z-index: 10000;
 }
 .ftable-multiselect-option {
   display: flex;
@@ -518,7 +525,7 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
   padding: 4px 8px;
   cursor: pointer;
   user-select: none;
-  gap: 8px;
+  gap: 4px;
 }
 .ftable-multiselect-option:hover {
   background: #f5f5f5;
@@ -535,7 +542,7 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
 }
 /* For search toolbar version */
 .ftable-multiselect-search .ftable-multiselect-display {
-  min-height: 20px;
+  min-height: 22px;
 }
 /* Responsive adjustments */
 @media (max-width: 768px) {

package/themes/basic/ftable_basic.min.css

@@ -1 +1 @@
-div.ftable-main-container{position:relative}div.ftable-main-container div.ftable-title{position:relative;text-align:left}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;border:none}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record{display:inline-flex;align-items:center;background-color:transparent;justify-content:center;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record::before{content:"➕";font-size:14px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container table.ftable{width:100%}div.ftable-main-container table.ftable thead th{padding:0 3px 0 6px;vertical-align:middle;text-align:left}div.ftable-main-container table.ftable thead th.ftable-column-header{height:1px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{position:relative;display:table;width:100%;height:100%!important}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container span.ftable-column-header-text{display:table-cell;vertical-align:middle;padding-top:4px;padding-bottom:3px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container div.ftable-column-resize-handler{position:absolute;display:table-cell;vertical-align:middle;height:100%;width:8px;right:-8px;z-index:2;cursor:col-resize}div.ftable-main-container table.ftable thead th.ftable-command-column-header{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select input{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-sortable-text{padding-right:20px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container{position:relative}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after,div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'';position:absolute;top:50%;transform:translateY(-50%);font-size:1.1em;color:#999;opacity:.7;text-shadow:0 1px 0 rgba(255,255,255,.5)}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'▲';right:.55em}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after{content:'▼';right:0}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::before{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::after{opacity:.7}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::after{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::before{opacity:.7}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button{margin:5px;padding:0;cursor:pointer;border:none;display:inline}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button span{display:none}div.ftable-main-container table.ftable tbody tr>td.ftable-command-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column input{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button::before{content:"📝";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button::before{content:"📋";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button::before{content:"🗑️ ";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr.ftable-no-data-row{text-align:center}div.ftable-main-container>div.ftable-bottom-panel{position:relative;min-height:24px;text-align:left}div.ftable-main-container>div.ftable-bottom-panel div.ftable-right-area{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list{display:inline-block}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{padding:2px 5px;display:inline-block;cursor:pointer}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{cursor:default}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-size-change{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page input[type=text]{width:22px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-info{vertical-align:middle}div.ftable-main-container div.ftable-column-resize-bar{opacity:.5;position:absolute;width:1px;background-color:#000}form.ftable-dialog-form div.ftable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.ftable-dialog-form div.ftable-input-field-container:last-child{border:none}form.ftable-dialog-form div.ftable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.ftable-dialog-form div.ftable-input{padding:2px}form.ftable-dialog-form span.ftable-option-text-clickable{position:relative;top:-2px}form.ftable-dialog-form div.ftable-textarea-input textarea{width:300px;min-height:60px}form.ftable-dialog-form div.ftable-checkbox-input span,form.ftable-dialog-form div.ftable-radio-input span{padding-left:4px}form.ftable-dialog-form div.ftable-checkbox-input input,form.ftable-dialog-form div.ftable-radio-input input,form.ftable-dialog-form span.ftable-option-text-clickable{cursor:pointer}.ftable-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none}.ftable-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1001;max-width:90%;max-height:90vh;overflow:auto}.ftable-modal-header{margin-bottom:15px;margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.ftable-modal-footer{margin-top:15px;padding-top:10px;border-top:1px solid #eee;text-align:right}.ftable-modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:28px;font-weight:700;color:#aaa}.ftable-busy-modal{padding:0}.ftable-dialog-button{opacity:.8;border:1px solid #ccc;padding:5px;margin:5px}.ftable-dialog-button:hover{background-color:#dedede}div.ftable-busy-message{cursor:wait;margin:0}div.ftable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}.ftable-table-div{display:block;overflow-x:auto}.ftable-table-div>table{overflow:hidden}.ftable-toolbarsearch{width:90%;min-width:fit-content}th.ftable-toolbarsearch-reset{text-align:center!important}div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}.ftable-yesno-check-wrapper{display:flex;align-items:center}.ftable-yesno-check-fixedlabel,.ftable-yesno-check-text{margin-left:4px}.ftable-yesno-check-text:before{content:attr(data-no)}.ftable-yesno-check-input:checked~.ftable-yesno-check-text:before{content:attr(data-yes)}.ftable-multiselect-container{position:relative;display:inline-block;width:100%}.ftable-multiselect-display{display:flex;align-items:center;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;min-height:38px;padding:4px 30px 4px 8px;position:relative}.ftable-multiselect-display:hover{border-color:#999}.ftable-multiselect-display:focus-within{border-color:#4caf50;box-shadow:0 0 0 2px rgba(76,175,80,.2)}.ftable-multiselect-selected{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center}.ftable-multiselect-placeholder{color:#555;font-weight:400}.ftable-multiselect-tag{display:inline-flex;align-items:center;background:#e3f2fd;border:1px solid #90caf9;border-radius:3px;padding:2px 6px;font-size:13px;gap:6px;max-width:100%}.ftable-multiselect-tag-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ftable-multiselect-tag-remove{cursor:pointer;font-weight:700;color:#1976d2;font-size:18px;line-height:1;padding:0 2px;user-select:none}.ftable-multiselect-tag-remove:hover{color:#d32f2f}.ftable-multiselect-count{color:#666;font-size:12px;margin-left:4px;white-space:nowrap}.ftable-multiselect-toggle{position:absolute;right:0;background:0 0;border:none;cursor:pointer;padding:4px;color:#666;font-size:10px;line-height:1}.ftable-multiselect-toggle:hover{color:#333}.ftable-multiselect-dropdown{position:relative;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);max-height:200px;overflow-y:auto}.ftable-multiselect-option{display:flex;align-items:center;padding:4px 8px;cursor:pointer;user-select:none;gap:8px}.ftable-multiselect-option:hover{background:#f5f5f5}.ftable-multiselect-checkbox{cursor:pointer;margin:0;flex-shrink:0}.ftable-multiselect-label{cursor:pointer;flex:1;margin:0}.ftable-multiselect-search .ftable-multiselect-display{min-height:20px}@media (max-width:768px){.ftable-multiselect-dropdown{max-height:200px}.ftable-multiselect-tag{font-size:12px}}.ftable-multiselect-dropdown::-webkit-scrollbar{width:8px}.ftable-multiselect-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover{background:#555}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}
+div.ftable-main-container{position:relative}div.ftable-main-container div.ftable-title{position:relative;text-align:left}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;border:none}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record{display:inline-flex;align-items:center;background-color:transparent;justify-content:center;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record::before{content:"➕";font-size:14px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container table.ftable{width:100%}div.ftable-main-container table.ftable thead th{padding:0 3px 0 6px;vertical-align:middle;text-align:left}div.ftable-main-container table.ftable thead th.ftable-column-header{height:1px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{position:relative;display:table;width:100%;height:100%!important}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container span.ftable-column-header-text{display:table-cell;vertical-align:middle;padding-top:4px;padding-bottom:3px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container div.ftable-column-resize-handler{position:absolute;display:table-cell;vertical-align:middle;height:100%;width:8px;right:-8px;z-index:2;cursor:col-resize}div.ftable-main-container table.ftable thead th.ftable-command-column-header{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select input{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-sortable-text{padding-right:20px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container{position:relative}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after,div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'';position:absolute;top:50%;transform:translateY(-50%);font-size:1.1em;color:#999;opacity:.7;text-shadow:0 1px 0 rgba(255,255,255,.5)}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::before{content:'▲';right:.55em}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable .ftable-column-header-container::after{content:'▼';right:0}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::before{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-asc .ftable-column-header-container::after{opacity:.7}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::after{color:#222;opacity:1;font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable.ftable-column-header-sorted-desc .ftable-column-header-container::before{opacity:.7}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button{margin:5px;padding:0;cursor:pointer;border:none;display:inline}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button span{display:none}div.ftable-main-container table.ftable tbody tr>td.ftable-command-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column input{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button::before{content:"📝";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button::before{content:"📋";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button::before{content:"🗑️ ";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr.ftable-no-data-row{text-align:center}div.ftable-main-container>div.ftable-bottom-panel{position:relative;min-height:24px;text-align:left}div.ftable-main-container>div.ftable-bottom-panel div.ftable-right-area{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list{display:inline-block}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{padding:2px 5px;display:inline-block;cursor:pointer}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{cursor:default}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-size-change{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page input[type=text]{width:22px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-info{vertical-align:middle}div.ftable-main-container div.ftable-column-resize-bar{opacity:.5;position:absolute;width:1px;background-color:#000}form.ftable-dialog-form div.ftable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.ftable-dialog-form div.ftable-input-field-container:last-child{border:none}form.ftable-dialog-form div.ftable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.ftable-dialog-form div.ftable-input{padding:2px}form.ftable-dialog-form span.ftable-option-text-clickable{position:relative;top:-2px}form.ftable-dialog-form div.ftable-textarea-input textarea{width:300px;min-height:60px}form.ftable-dialog-form div.ftable-checkbox-input span,form.ftable-dialog-form div.ftable-radio-input span{padding-left:4px}form.ftable-dialog-form div.ftable-checkbox-input input,form.ftable-dialog-form div.ftable-radio-input input,form.ftable-dialog-form span.ftable-option-text-clickable{cursor:pointer}.ftable-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none}.ftable-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1001;max-width:90%;max-height:90vh;overflow:auto}.ftable-modal-header{margin-bottom:15px;margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.ftable-modal-footer{margin-top:15px;padding-top:10px;border-top:1px solid #eee;text-align:right}.ftable-modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:28px;font-weight:700;color:#aaa}.ftable-busy-modal{padding:0}.ftable-dialog-button{opacity:.8;border:1px solid #ccc;padding:5px;margin:5px}.ftable-dialog-button:hover{background-color:#dedede}div.ftable-busy-message{cursor:wait;margin:0}div.ftable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}.ftable-table-div{display:block;overflow-x:auto}.ftable-table-div>table{overflow:hidden}.ftable-toolbarsearch{width:90%;min-width:fit-content}th.ftable-toolbarsearch-reset{text-align:center!important}div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}.ftable-yesno-check-wrapper{display:flex;align-items:center}.ftable-yesno-check-fixedlabel,.ftable-yesno-check-text{margin-left:4px}.ftable-yesno-check-text:before{content:attr(data-no)}.ftable-yesno-check-input:checked~.ftable-yesno-check-text:before{content:attr(data-yes)}.ftable-multiselect-container{position:relative;display:inline-block;width:100%;min-width:200px}.ftable-multiselect-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:0 0;z-index:9999}.ftable-multiselect-display{display:flex;align-items:center;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;min-height:38px;padding:4px 30px 4px 8px;position:relative}.ftable-multiselect-display:hover{border-color:#999}.ftable-multiselect-selected{display:flex;flex-wrap:wrap;gap:4px;flex:1;align-items:center}.ftable-multiselect-placeholder{color:#555}.ftable-multiselect-tag{display:inline-flex;align-items:center;background:#e3f2fd;border:1px solid #90caf9;border-radius:3px;padding:2px 6px;font-size:13px;gap:6px;max-width:100%}.ftable-multiselect-tag-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ftable-multiselect-tag-remove{cursor:pointer;font-weight:700;color:#1976d2;font-size:18px;line-height:1;padding:0 2px;user-select:none}.ftable-multiselect-tag-remove:hover{color:#d32f2f}.ftable-multiselect-count{color:#666;font-size:12px;margin-left:4px;white-space:nowrap}.ftable-multiselect-toggle{position:absolute;right:0;background:0 0;border:none;cursor:pointer;padding:4px;color:#666;font-size:10px;line-height:1}.ftable-multiselect-toggle:hover{color:#333}.ftable-multiselect-dropdown{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 6px rgba(0,0,0,.1);max-height:200px;overflow-y:auto;z-index:10000}.ftable-multiselect-option{display:flex;align-items:center;padding:4px 8px;cursor:pointer;user-select:none;gap:4px}.ftable-multiselect-option:hover{background:#f5f5f5}.ftable-multiselect-checkbox{cursor:pointer;margin:0;flex-shrink:0}.ftable-multiselect-label{cursor:pointer;flex:1;margin:0}.ftable-multiselect-search .ftable-multiselect-display{min-height:22px}@media (max-width:768px){.ftable-multiselect-dropdown{max-height:200px}.ftable-multiselect-tag{font-size:12px}}.ftable-multiselect-dropdown::-webkit-scrollbar{width:8px}.ftable-multiselect-dropdown::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.ftable-multiselect-dropdown::-webkit-scrollbar-thumb:hover{background:#555}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}

package/themes/ftable_theme_base.less

@@ -723,9 +723,20 @@
 
     /* Custom Multi-Select Styles */
     .ftable-multiselect-container {
-        position: relative;
-        display: inline-block;
+        position: relative; display: inline-block;
         width: 100%;
+        min-width: 200px;
+    }
+
+    /* Overlay for closing dropdown when clicking outside */
+    .ftable-multiselect-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: transparent;
+        z-index: 9999;
     }
 
     .ftable-multiselect-display {
@@ -744,11 +755,6 @@
         border-color: #999;
     }
 
-    .ftable-multiselect-display:focus-within {
-        border-color: #4CAF50;
-        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
-    }
-
     .ftable-multiselect-selected {
         display: flex;
         flex-wrap: wrap;
@@ -759,7 +765,6 @@
 
     .ftable-multiselect-placeholder {
         color: #555;
-        font-weight: normal;
     }
 
     .ftable-multiselect-tag {
@@ -818,13 +823,14 @@
     }
 
     .ftable-multiselect-dropdown {
-        position: relative;
+        /* Position is set dynamically via JavaScript */
         background: white;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         max-height: 200px;
         overflow-y: auto;
+        z-index: 10000;
     }
 
     .ftable-multiselect-option {
@@ -833,7 +839,7 @@
         padding: 4px 8px;
         cursor: pointer;
         user-select: none;
-        gap: 8px;
+        gap: 4px;
     }
 
     .ftable-multiselect-option:hover {
@@ -854,7 +860,7 @@
 
     /* For search toolbar version */
     .ftable-multiselect-search .ftable-multiselect-display {
-        min-height: 20px;
+        min-height: 22px;
     }
 
     /* Responsive adjustments */