@liedekef/ftable 1.1.6 → 1.1.7

package/ftable.umd.js

@@ -4,9 +4,7 @@
     typeof define === 'function' && define.amd ? define(factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.FTable = factory());
 }(this, (function () {
-    // Modern fTable - Vanilla JS Refactor
-
-const FTABLE_DEFAULT_MESSAGES = {
+    const FTABLE_DEFAULT_MESSAGES = {
     serverCommunicationError: 'An error occurred while communicating to the server.',
     loadingMessage: 'Loading records...',
     noDataAvailable: 'No data available!',
@@ -753,7 +751,9 @@ class FTableFormBuilder {
         }
 
         try {
-            const response = await FTableHttpClient.get(url);
+            const response = this.options.forcePost
+                ? await FTableHttpClient.post(url)
+                : await FTableHttpClient.get(url);
             const options = response.Options || response.options || response || [];
 
             // Only cache if noCache is false
@@ -1359,10 +1359,14 @@ class FTable extends FTableEventEmitter {
         this.element = typeof element === 'string' ? 
             document.querySelector(element) : element;
 
+        if (!this.element) {
+            return;
+        }
+
         // Prevent double initialization
-        if (element.ftableInstance) {
+        if (this.element.ftableInstance) {
             //console.warn('FTable is already initialized on this element. Using that.');
-            return element.ftableInstance;
+            return this.element.ftableInstance;
         }
         
         this.options = this.mergeOptions(options);
@@ -1399,6 +1403,7 @@ class FTable extends FTableEventEmitter {
             logLevel: FTableLogger.LOG_LEVELS.WARN,
             actions: {},
             fields: {},
+            forcePost: true,
             animationsEnabled: true,
             loadingAnimationDelay: 1000,
             defaultDateLocale: '',
@@ -2525,13 +2530,15 @@ class FTable extends FTableEventEmitter {
         // Create overlay to capture clicks outside menu
         this.elements.columnSelectionOverlay = FTableDOMHelper.create('div', {
             className: 'ftable-contextmenu-overlay',
-            parent: this.elements.mainContainer
+            //parent: this.elements.mainContainer
+            parent: document.body
         });
 
         // Create the menu
         this.elements.columnSelectionMenu = FTableDOMHelper.create('div', {
             className: 'ftable-column-selection-container',
-            parent: this.elements.columnSelectionOverlay
+            //parent: this.elements.columnSelectionOverlay
+            parent: document.body
         });
 
         // Populate menu with column options
@@ -2617,29 +2624,36 @@ class FTable extends FTableEventEmitter {
     }
 
     positionColumnSelectionMenu(e) {
-        const containerRect = this.elements.mainContainer.getBoundingClientRect();
-        const menuWidth = 200; // Approximate menu width
-        const menuHeight = this.columnList.length * 30 + 20; // Approximate height
+        const self = this;
 
-        let left = e.clientX - containerRect.left;
-        let top = e.clientY - containerRect.top;
+        // Use clientX/clientY (relative to viewport)
+        let left = e.clientX;
+        let top = e.clientY;
 
-        // Adjust position to keep menu within container bounds
-        if (left + menuWidth > containerRect.width) {
-            left = Math.max(0, containerRect.width - menuWidth);
-        }
+        // Define minimum width
+        const minWidth = 100;
 
-        if (top + menuHeight > containerRect.height) {
-            top = Math.max(0, containerRect.height - menuHeight);
-        }
+        // Position the menu
+        self.elements.columnSelectionMenu.style.position = 'absolute';
+        self.elements.columnSelectionMenu.style.left = `${left}px`;
+        self.elements.columnSelectionMenu.style.top = `${top}px`;
+        self.elements.columnSelectionMenu.style.minWidth = `${minWidth}px`;
+        self.elements.columnSelectionMenu.style.boxSizing = 'border-box';
+
+        // Optional: Adjust if menu would overflow right edge
+        const menuWidth = self.elements.columnSelectionMenu.offsetWidth;
+        const windowWidth = window.innerWidth;
 
-        this.elements.columnSelectionMenu.style.left = left + 'px';
-        this.elements.columnSelectionMenu.style.top = top + 'px';
+        if (left + menuWidth > windowWidth) {
+            left = Math.max(10, windowWidth - menuWidth - 10); // 10px margin
+            self.elements.columnSelectionMenu.style.left = `${left}px`;
+        }
     }
 
     hideColumnSelectionMenu() {
         if (this.elements.columnSelectionOverlay) {
             this.elements.columnSelectionOverlay.remove();
+            this.elements.columnSelectionMenu.remove();
             this.elements.columnSelectionOverlay = null;
             this.elements.columnSelectionMenu = null;
         }
@@ -2882,7 +2896,9 @@ class FTable extends FTableEventEmitter {
         if (typeof listAction === 'function') {
             data = await listAction(params);
         } else if (typeof listAction === 'string') {
-            data = await FTableHttpClient.get(listAction, params);
+            data = this.options.forcePost
+                ? await FTableHttpClient.post(listAction, params)
+                : await FTableHttpClient.get(listAction, params);
         } else {
             throw new Error('No valid listAction provided');
         }
@@ -4416,7 +4432,9 @@ class FTable extends FTableEventEmitter {
                 ...params 
             };
 
-            const response = await FTableHttpClient.get(url, fullParams);
+            const response = this.options.forcePost
+                ? await FTableHttpClient.post(url, fullParams)
+                : await FTableHttpClient.get(url, fullParams);
 
             if (!response || !response.Record) {
                 throw new Error('Invalid response or missing Record');
@@ -4718,141 +4736,5 @@ class FTable extends FTableEventEmitter {
     }
 }
 
-// Export for use
-//window.FTable = FTable;
-
-// Usage example:
-/*
-const table = new FTable('#myTable', {
-    title: 'My Data Table',
-    paging: true,
-    pageSize: 25,
-    sorting: true,
-    selecting: true,
-    actions: {
-        listAction: '/api/users',
-        createAction: '/api/users',
-        updateAction: '/api/users',
-        deleteAction: '/api/users'
-    },
-    fields: {
-        id: { key: true, list: false },
-        name: {
-            title: 'Name',
-            type: 'text',
-            inputAttributes: "maxlength=100 required"
-        },
-        email: {
-            title: 'Email',
-            type: 'email',
-            width: '40%',
-            inputAttributes: {
-                pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'
-            }
-        },
-        created: { title: 'Created', type: 'date', width: '30%' }
-    },
-    toolbarsearch: true,
-    childTable: {
-        title: 'Child Records',
-        actions: {
-            listAction: '/api/users/{id}/orders', // {id} will be replaced with parent record id
-            createAction: '/api/users/{id}/orders',
-            updateAction: '/api/orders',
-            deleteAction: '/api/orders'
-        },
-        fields: {
-            orderId: { key: true, list: false },
-            orderDate: { title: 'Date', type: 'date' },
-            amount: { title: 'Amount', type: 'number' }
-        }
-    },
-    childTableColumnsVisible: true,
-
-});
-
-// Or dynamic child table
-childTable: async function(parentRecord) {
-    return {
-        title: `Orders for ${parentRecord.name}`,
-        actions: {
-            listAction: `/api/users/${parentRecord.id}/orders`
-        },
-        fields: {
-            // Dynamic fields based on parent
-        }
-    };
-}
-
-// function for select options
-fields: {
-    assignee: {
-        title: 'Assigned To',
-        type: 'select',
-        options: async function(params) {
-            // params contains dependsOnValue, dependsOnField, etc.
-            const department = params.dependsOnValue;
-            const response = await fetch(`/api/users?department=${department}`);
-            return response.json();
-        },
-        dependsOn: 'department'
-    }
-}
-
-// child table:
-phoneNumbers: {
-    title: 'Phones',
-    display: (data) => {
-        const img = document.createElement('img');
-        img.className = 'child-opener-image';
-        img.src = '/Content/images/Misc/phone.png';
-        img.title = 'Edit phone numbers';
-        img.style.cursor = 'pointer';
-
-        parentRow = img.closest('tr');
-        img.addEventListener('click', () => {
-            e.stopPropagation();
-            if (parentRow.childRow) {
-                myTable.closeChildTable(parentRow);
-            } else {
-                myTable.openChildTable( parentRow, {
-                    title: `${data.record.Name} - Phone numbers`,
-                    actions: {
-                        listAction: `/PagingPerson/PhoneList?PersonId=${data.record.PersonId}`,
-                        deleteAction: '/PagingPerson/DeletePhone',
-                        updateAction: '/PagingPerson/UpdatePhone',
-                        createAction: `/PagingPerson/CreatePhone?PersonId=${data.record.PersonId}`
-                    },
-                    fields: {
-                        PhoneId: { key: true },
-                        Number: { title: 'Number', type: 'text' },
-                        Type: { title: 'Type', options: { 0: 'Home', 1: 'Work', 2: 'Mobile' } }
-                    }
-                }, (childTable) => {
-                    console.log('Child table created');
-                };
-            }
-        });
-        img.addEventListener('click', (e) => {
-            e.stopPropagation();
-            if (parentRow.childRow) {
-                myTable.closeChildTable(parentRow);
-            } else {
-                myTable.openChildTable(parentRow, childOptions);
-            }
-        });
-
-        return img;
-    }
-}
-
-// Clear specific options cache
-table.clearOptionsCache('/api/countries');
-
-table.load();
-*/
-
-window.FTable = FTable;
-
     return FTable;
 })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liedekef/ftable",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "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

@@ -172,31 +172,6 @@ div.ftable-main-container div.ftable-column-resize-bar {
   width: 1px;
   background-color: #000;
 }
-div.ftable-main-container div.ftable-column-selection-container {
-  position: absolute;
-  border: 1px solid #C8C8C8;
-  background: #fff;
-  color: #000;
-  z-index: 101;
-  padding: 5px;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list {
-  margin: 0px;
-  padding: 0px;
-  list-style: none;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li {
-  margin: 0px;
-  padding: 2px 0px;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li label span {
-  position: relative;
-  top: -1px;
-  margin-left: 4px;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li input[type="checkbox"] {
-  cursor: pointer;
-}
 form.ftable-dialog-form div.ftable-input-field-container {
   padding: 2px 0px 3px 0px;
   border-bottom: 1px solid #ddd;
@@ -318,6 +293,31 @@ div.ftable-contextmenu-overlay {
 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: 0px;
+  padding: 0px;
+  list-style: none;
+}
+div.ftable-column-selection-container ul.ftable-column-select-list li {
+  margin: 0px;
+  padding: 2px 0px;
+}
+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;
+}
 div.ftable-main-container div.ftable-title div.ftable-title-text {
   font-size: 16px;
   font-weight: bold;

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 .ftable-close-button{right:0;top:0;bottom:0;position:absolute}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;vertical-align:bottom}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-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container div.ftable-title .ftable-close-button+div.ftable-toolbar{margin-right:30px}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}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 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.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}div.ftable-main-container div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}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-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-main-container div.ftable-title .ftable-close-button{background:url('close.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container{background:url('column-sortable.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container{background:url('column-asc.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container{background:url('column-desc.png') no-repeat right}div.ftable-main-container table.ftable tbody>tr>td .ftable-edit-command-button{background:url('edit.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-clone-command-button{background:url('clone.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-delete-command-button{background:url('delete.png') no-repeat;width:16px;height:16px}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 .ftable-close-button{right:0;top:0;bottom:0;position:absolute}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;vertical-align:bottom}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-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container div.ftable-title .ftable-close-button+div.ftable-toolbar{margin-right:30px}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}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 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.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}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-main-container div.ftable-title .ftable-close-button{background:url('close.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container{background:url('column-sortable.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container{background:url('column-asc.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container{background:url('column-desc.png') no-repeat right}div.ftable-main-container table.ftable tbody>tr>td .ftable-edit-command-button{background:url('edit.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-clone-command-button{background:url('clone.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-delete-command-button{background:url('delete.png') no-repeat;width:16px;height:16px}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}

package/themes/ftable_theme_base.less

@@ -367,41 +367,6 @@
             background-color: #000;
         }
 
-        div.ftable-column-selection-container
-        {
-            position: absolute;
-            border: 1px solid #C8C8C8;
-            background: #fff;
-            color: #000;
-            z-index: 101;
-            padding: 5px;
-
-            ul.ftable-column-select-list
-            {
-                .clear-list-styles;
-
-                li
-                {
-                    margin: 0px;
-                    padding: 2px 0px;
-
-                    label
-                    {
-                        span
-                        {
-                            position: relative;
-                            top: -1px;
-                            margin-left: 4px;
-                        }
-                    }
-
-                    input[type="checkbox"]
-                    {
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
     }
 
     form.ftable-dialog-form
@@ -591,4 +556,39 @@
         text-align: center !important;
     }
 
+    div.ftable-column-selection-container
+    {
+        position: absolute;
+        border: 1px solid #C8C8C8;
+        background: #fff;
+        color: #000;
+        z-index: 101;
+        padding: 5px;
+
+        ul.ftable-column-select-list
+        {
+            .clear-list-styles;
+
+            li
+            {
+                margin: 0px;
+                padding: 2px 0px;
+
+                label
+                {
+                    span
+                    {
+                        position: relative;
+                        top: -1px;
+                        margin-left: 4px;
+                    }
+                }
+
+                input[type="checkbox"]
+                {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
 }

package/themes/lightcolor/blue/ftable.css

@@ -169,31 +169,6 @@ div.ftable-main-container div.ftable-column-resize-bar {
   width: 1px;
   background-color: #000;
 }
-div.ftable-main-container div.ftable-column-selection-container {
-  position: absolute;
-  border: 1px solid #C8C8C8;
-  background: #fff;
-  color: #000;
-  z-index: 101;
-  padding: 5px;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list {
-  margin: 0px;
-  padding: 0px;
-  list-style: none;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li {
-  margin: 0px;
-  padding: 2px 0px;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li label span {
-  position: relative;
-  top: -1px;
-  margin-left: 4px;
-}
-div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li input[type="checkbox"] {
-  cursor: pointer;
-}
 form.ftable-dialog-form div.ftable-input-field-container {
   padding: 2px 0px 3px 0px;
   border-bottom: 1px solid #ddd;
@@ -315,6 +290,31 @@ div.ftable-contextmenu-overlay {
 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: 0px;
+  padding: 0px;
+  list-style: none;
+}
+div.ftable-column-selection-container ul.ftable-column-select-list li {
+  margin: 0px;
+  padding: 2px 0px;
+}
+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;
+}
 div.ftable-main-container {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 1em;
@@ -521,14 +521,6 @@ div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a {
 div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a:hover {
   text-decoration: underline;
 }
-div.ftable-main-container div.ftable-column-selection-container {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 2px 2px 4px rgba(50, 51, 50, 0.75);
-  -moz-box-shadow: 2px 2px 4px rgba(50, 51, 50, 0.75);
-  box-shadow: 2px 2px 4px rgba(50, 51, 50, 0.75);
-}
 form.ftable-dialog-form {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 1em;
@@ -552,6 +544,14 @@ div.ftable-busy-message {
   background: url('../blue/loading.gif') no-repeat;
   background-position: 5px;
 }
+div.ftable-column-selection-container {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: 2px 2px 4px rgba(50, 51, 50, 0.75);
+  -moz-box-shadow: 2px 2px 4px rgba(50, 51, 50, 0.75);
+  box-shadow: 2px 2px 4px rgba(50, 51, 50, 0.75);
+}
 div.ftable-main-container div.ftable-title {
   background: #78b1ed;
   background: -moz-linear-gradient(top, #78b1ed 0%, #417bb5 100%);

package/themes/lightcolor/blue/ftable.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 .ftable-close-button{right:0;top:0;bottom:0;position:absolute}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;vertical-align:bottom}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-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container div.ftable-title .ftable-close-button+div.ftable-toolbar{margin-right:30px}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}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 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.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}div.ftable-main-container div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-main-container div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}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-main-container{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1em;font-weight:400;color:#222}div.ftable-main-container div.ftable-title{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;position:relative;line-height:34px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.5);padding-left:10px;border:1px solid}div.ftable-main-container div.ftable-title div.ftable-title-text{font-weight:700}div.ftable-main-container div.ftable-title .ftable-close-button{right:6px;top:6px;bottom:6px;position:absolute;opacity:.8;background:url('../close.png') no-repeat;width:22px;height:22px}div.ftable-main-container div.ftable-title .ftable-close-button:hover{opacity:1}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;line-height:26px}div.ftable-main-container div.ftable-title div.ftable-toolbar span.ftable-toolbar-item.ftable-toolbar-item-add-record span.ftable-toolbar-item-icon{background-image:url('../add.png')}div.ftable-main-container table.ftable{border-collapse:collapse;border-spacing:0;border-top:0;border-right:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;border-left:1px solid #c8c8c8}div.ftable-main-container table.ftable thead{background:url('../bg-thead.png') repeat-x scroll top left #ddd;border-bottom:1px solid #c8c8c8}div.ftable-main-container table.ftable thead th{border-left:1px solid #fff;border-right:1px solid #c8c8c8}div.ftable-main-container table.ftable thead th:first-child{border-left:none}div.ftable-main-container table.ftable thead thth:last-child{border-right:none}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{height:20px}div.ftable-main-container table.ftable thead th.ftable-column-header span.ftable-column-header-text{margin-top:3px}div.ftable-main-container table.ftable thead th.ftable-column-header-select{padding:5px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container{background:url('../column-sortable.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container{background:url('../column-asc.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container{background:url('../column-desc.png') no-repeat right}div.ftable-main-container table.ftable tbody>tr{padding:2px;background:#f8f8f8;height:30px}div.ftable-main-container table.ftable tbody>tr>td{padding:5px;border-left:1px dotted #bebebe}div.ftable-main-container table.ftable tbody>tr>td:first-child{border-left:none}div.ftable-main-container table.ftable tbody>tr>td .ftable-edit-command-button{background:url('../edit.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-clone-command-button{background:url('../clone.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-delete-command-button{background:url('../delete.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr.ftable-row-even{background:#f0f0f0}div.ftable-main-container table.ftable tbody>tr:hover{background:#e8eaef}div.ftable-main-container table.ftable tbody>tr.ftable-row-selected{-webkit-text-shadow:0 1px 0 #333;text-shadow:0 1px 0 #333;color:#fcfcfc}div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td{background-color:#bbb;padding:2px 1px 2px 2px}div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td .ftable{border:none;border-bottom:1px solid #c8c8c8}div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td .ftable-bottom-panel,div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td .ftable-title{-webkit-border-radius:0px;-moz-border-radius:0;border-radius:0;border:none}div.ftable-main-container div.ftable-bottom-panel{-webkit-border-radius:0px 0px 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;padding:1px;background:#fff;border:1px solid #c8c8c8;border-top:none;min-height:24px;line-height:16px;font-size:.9em}div.ftable-main-container div.ftable-bottom-panel div.ftable-right-area{padding:2px}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list{margin:2px}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{-webkit-text-shadow:0 1px 0 white;text-shadow:0 1px 0 #fff;background-color:#ebebeb;border-style:solid;border-width:1px;border-color:#fff #b5b5b5 #b5b5b5 #fff;padding:2px 5px}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number:hover{background-color:#ddd}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active{-webkit-text-shadow:0 1px 0 #666;text-shadow:0 1px 0 #666;color:#fcfcfc}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled{opacity:.5}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled.ftable-page-number-active{opacity:1}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled:hover{background-color:#ebebeb}div.ftable-main-container div.ftable-bottom-panel .ftable-page-info{display:inline-block;padding:4px}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record{margin:3px}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a{font-weight:700;text-decoration:none}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a:hover{text-decoration:underline}div.ftable-main-container div.ftable-column-selection-container{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 4px rgba(50,51,50,.75);-moz-box-shadow:2px 2px 4px rgba(50,51,50,.75);box-shadow:2px 2px 4px rgba(50,51,50,.75)}form.ftable-dialog-form{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1em;font-weight:400}form.ftable-dialog-form div.ftable-input-label{font-weight:700}div.ftable-busy-message{-webkit-text-shadow:0 1px 0 #333;text-shadow:0 1px 0 #333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 4px rgba(50,51,50,.75);-moz-box-shadow:2px 2px 4px rgba(50,51,50,.75);box-shadow:2px 2px 4px rgba(50,51,50,.75);color:#fff;border:1px solid;padding:3px 5px 5px 27px;background:url('../blue/loading.gif') no-repeat;background-position:5px}div.ftable-main-container div.ftable-title{background:#78b1ed;background:-moz-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#78b1ed),color-stop(100%,#417bb5));background:-webkit-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:-o-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:-ms-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:linear-gradient(to bottom,#78b1ed 0,#417bb5 100%);border-color:#2b5177}div.ftable-main-container div.ftable-title div.ftable-title-text{-webkit-text-shadow:0 1px 0 #666;text-shadow:0 1px 0 #666;color:#fff}div.ftable-main-container div.ftable-title div.ftable-toolbar span.ftable-toolbar-item{color:#fff}div.ftable-main-container div.ftable-title div.ftable-toolbar span.ftable-toolbar-item.ftable-toolbar-item-hover{background-color:#417bb5}div.ftable-main-container table.ftable tbody>tr.ftable-row-selected,div.ftable-main-container table.ftable tbody>tr.ftable-row-selected:hover{background-color:#5f9cdc}div.ftable-main-container table.ftable tbody>tr.ftable-row-created,div.ftable-main-container table.ftable tbody>tr.ftable-row-deleting,div.ftable-main-container table.ftable tbody>tr.ftable-row-updated{background-color:#5f9cdc}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-active:hover{background-color:#2b5177;border-color:#092f55}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a{color:#2b5177}div.ftable-busy-message{border-color:#2b5177;background-color:#78b1ed}
+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 .ftable-close-button{right:0;top:0;bottom:0;position:absolute}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;vertical-align:bottom}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-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container div.ftable-title .ftable-close-button+div.ftable-toolbar{margin-right:30px}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}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 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.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}div.ftable-main-container{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1em;font-weight:400;color:#222}div.ftable-main-container div.ftable-title{-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;position:relative;line-height:34px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.5);padding-left:10px;border:1px solid}div.ftable-main-container div.ftable-title div.ftable-title-text{font-weight:700}div.ftable-main-container div.ftable-title .ftable-close-button{right:6px;top:6px;bottom:6px;position:absolute;opacity:.8;background:url('../close.png') no-repeat;width:22px;height:22px}div.ftable-main-container div.ftable-title .ftable-close-button:hover{opacity:1}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;line-height:26px}div.ftable-main-container div.ftable-title div.ftable-toolbar span.ftable-toolbar-item.ftable-toolbar-item-add-record span.ftable-toolbar-item-icon{background-image:url('../add.png')}div.ftable-main-container table.ftable{border-collapse:collapse;border-spacing:0;border-top:0;border-right:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;border-left:1px solid #c8c8c8}div.ftable-main-container table.ftable thead{background:url('../bg-thead.png') repeat-x scroll top left #ddd;border-bottom:1px solid #c8c8c8}div.ftable-main-container table.ftable thead th{border-left:1px solid #fff;border-right:1px solid #c8c8c8}div.ftable-main-container table.ftable thead th:first-child{border-left:none}div.ftable-main-container table.ftable thead thth:last-child{border-right:none}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{height:20px}div.ftable-main-container table.ftable thead th.ftable-column-header span.ftable-column-header-text{margin-top:3px}div.ftable-main-container table.ftable thead th.ftable-column-header-select{padding:5px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container{background:url('../column-sortable.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container{background:url('../column-asc.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container{background:url('../column-desc.png') no-repeat right}div.ftable-main-container table.ftable tbody>tr{padding:2px;background:#f8f8f8;height:30px}div.ftable-main-container table.ftable tbody>tr>td{padding:5px;border-left:1px dotted #bebebe}div.ftable-main-container table.ftable tbody>tr>td:first-child{border-left:none}div.ftable-main-container table.ftable tbody>tr>td .ftable-edit-command-button{background:url('../edit.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-clone-command-button{background:url('../clone.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-delete-command-button{background:url('../delete.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr.ftable-row-even{background:#f0f0f0}div.ftable-main-container table.ftable tbody>tr:hover{background:#e8eaef}div.ftable-main-container table.ftable tbody>tr.ftable-row-selected{-webkit-text-shadow:0 1px 0 #333;text-shadow:0 1px 0 #333;color:#fcfcfc}div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td{background-color:#bbb;padding:2px 1px 2px 2px}div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td .ftable{border:none;border-bottom:1px solid #c8c8c8}div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td .ftable-bottom-panel,div.ftable-main-container table.ftable tbody>tr.ftable-child-row>td .ftable-title{-webkit-border-radius:0px;-moz-border-radius:0;border-radius:0;border:none}div.ftable-main-container div.ftable-bottom-panel{-webkit-border-radius:0px 0px 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;padding:1px;background:#fff;border:1px solid #c8c8c8;border-top:none;min-height:24px;line-height:16px;font-size:.9em}div.ftable-main-container div.ftable-bottom-panel div.ftable-right-area{padding:2px}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list{margin:2px}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{-webkit-text-shadow:0 1px 0 white;text-shadow:0 1px 0 #fff;background-color:#ebebeb;border-style:solid;border-width:1px;border-color:#fff #b5b5b5 #b5b5b5 #fff;padding:2px 5px}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous:hover,div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number:hover{background-color:#ddd}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active{-webkit-text-shadow:0 1px 0 #666;text-shadow:0 1px 0 #666;color:#fcfcfc}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled{opacity:.5}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled.ftable-page-number-active{opacity:1}div.ftable-main-container div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled:hover{background-color:#ebebeb}div.ftable-main-container div.ftable-bottom-panel .ftable-page-info{display:inline-block;padding:4px}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record{margin:3px}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a{font-weight:700;text-decoration:none}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a:hover{text-decoration:underline}form.ftable-dialog-form{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:1em;font-weight:400}form.ftable-dialog-form div.ftable-input-label{font-weight:700}div.ftable-busy-message{-webkit-text-shadow:0 1px 0 #333;text-shadow:0 1px 0 #333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 4px rgba(50,51,50,.75);-moz-box-shadow:2px 2px 4px rgba(50,51,50,.75);box-shadow:2px 2px 4px rgba(50,51,50,.75);color:#fff;border:1px solid;padding:3px 5px 5px 27px;background:url('../blue/loading.gif') no-repeat;background-position:5px}div.ftable-column-selection-container{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:2px 2px 4px rgba(50,51,50,.75);-moz-box-shadow:2px 2px 4px rgba(50,51,50,.75);box-shadow:2px 2px 4px rgba(50,51,50,.75)}div.ftable-main-container div.ftable-title{background:#78b1ed;background:-moz-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#78b1ed),color-stop(100%,#417bb5));background:-webkit-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:-o-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:-ms-linear-gradient(top,#78b1ed 0,#417bb5 100%);background:linear-gradient(to bottom,#78b1ed 0,#417bb5 100%);border-color:#2b5177}div.ftable-main-container div.ftable-title div.ftable-title-text{-webkit-text-shadow:0 1px 0 #666;text-shadow:0 1px 0 #666;color:#fff}div.ftable-main-container div.ftable-title div.ftable-toolbar span.ftable-toolbar-item{color:#fff}div.ftable-main-container div.ftable-title div.ftable-toolbar span.ftable-toolbar-item.ftable-toolbar-item-hover{background-color:#417bb5}div.ftable-main-container table.ftable tbody>tr.ftable-row-selected,div.ftable-main-container table.ftable tbody>tr.ftable-row-selected:hover{background-color:#5f9cdc}div.ftable-main-container table.ftable tbody>tr.ftable-row-created,div.ftable-main-container table.ftable tbody>tr.ftable-row-deleting,div.ftable-main-container table.ftable tbody>tr.ftable-row-updated{background-color:#5f9cdc}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-active:hover{background-color:#2b5177;border-color:#092f55}div.ftable-main-container div.ftable-bottom-panel span.ftable-add-record a{color:#2b5177}div.ftable-busy-message{border-color:#2b5177;background-color:#78b1ed}

package/themes/lightcolor/ftable_lightcolor_base.less

@@ -306,11 +306,6 @@
             }
         }
 
-        div.ftable-column-selection-container
-        {
-            .border-radius(3px);
-            .box-shadow(2px 2px 4px rgba(50, 51, 50, 0.75));
-        }
     }
 
     form.ftable-dialog-form
@@ -334,4 +329,10 @@
         background: url('@{theme-folder}/loading.gif') no-repeat;
         background-position: 5px;
     }
+
+    div.ftable-column-selection-container
+    {
+        .border-radius(3px);
+        .box-shadow(2px 2px 4px rgba(50, 51, 50, 0.75));
+    }
 }