From 11c8c039cc8c5a1948281f410bdb440d5a9f1608 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Tue, 8 Nov 2016 12:04:28 +1300
Subject: Specify min width for columns

---
 web/app/Style.js                 |  2 +
 web/app/view/AttributeAliases.js | 23 ++++++----
 web/app/view/Attributes.js       | 23 ++++++----
 web/app/view/DeviceGeofences.js  | 14 +++---
 web/app/view/Devices.js          | 94 ++++++++++++++++++++--------------------
 web/app/view/Geofences.js        | 23 ++++++----
 web/app/view/GroupGeofences.js   | 14 +++---
 web/app/view/Groups.js           | 16 ++++---
 web/app/view/Notifications.js    | 72 +++++++++++++++---------------
 web/app/view/Report.js           | 10 +++++
 web/app/view/ReportController.js | 27 ------------
 web/app/view/State.js            | 33 ++++++++------
 web/app/view/Statistics.js       | 55 +++++++++++------------
 web/app/view/UserDevices.js      | 22 ++++++----
 web/app/view/UserGeofences.js    | 14 +++---
 web/app/view/UserGroups.js       | 14 +++---
 web/app/view/Users.js            | 30 +++++++------
 17 files changed, 263 insertions(+), 223 deletions(-)

(limited to 'web')

diff --git a/web/app/Style.js b/web/app/Style.js
index b4201bbd..8db8667e 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -35,6 +35,8 @@ Ext.define('Traccar.Style', {
     reportHeight: 250,
     reportTime: 100,
 
+    columnWidthNormal: 100,
+
     mapDefaultLat: 12.966667,
     mapDefaultLon: 77.566667,
     mapDefaultZoom: 4,
diff --git a/web/app/view/AttributeAliases.js b/web/app/view/AttributeAliases.js
index c6934354..6408ad3a 100644
--- a/web/app/view/AttributeAliases.js
+++ b/web/app/view/AttributeAliases.js
@@ -51,13 +51,18 @@ Ext.define('Traccar.view.AttributeAliases', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.sharedAttribute,
-        dataIndex: 'attribute',
-        flex: 1
-    }, {
-        text: Strings.sharedAlias,
-        dataIndex: 'alias',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.sharedAttribute,
+            dataIndex: 'attribute'
+        }, {
+            text: Strings.sharedAlias,
+            dataIndex: 'alias'
+        }]
+    }
 });
diff --git a/web/app/view/Attributes.js b/web/app/view/Attributes.js
index 88d6de82..aa2db368 100644
--- a/web/app/view/Attributes.js
+++ b/web/app/view/Attributes.js
@@ -36,13 +36,18 @@ Ext.define('Traccar.view.Attributes', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }, {
-        text: Strings.stateValue,
-        dataIndex: 'value',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.sharedName,
+            dataIndex: 'name'
+        }, {
+            text: Strings.stateValue,
+            dataIndex: 'value'
+        }]
+    }
 });
diff --git a/web/app/view/DeviceGeofences.js b/web/app/view/DeviceGeofences.js
index 784583f8..986ca3a4 100644
--- a/web/app/view/DeviceGeofences.js
+++ b/web/app/view/DeviceGeofences.js
@@ -36,9 +36,13 @@ Ext.define('Traccar.view.DeviceGeofences', {
         beforeselect: 'onBeforeSelect'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        items: [{
+            text: Strings.sharedName,
+            minWidth: Traccar.Style.columnWidthNormal,
+            dataIndex: 'name'
+        }]
+    }
 });
diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
index 19739768..1789a119 100644
--- a/web/app/view/Devices.js
+++ b/web/app/view/Devices.js
@@ -153,52 +153,52 @@ Ext.define('Traccar.view.Devices', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }, {
-        text: Strings.deviceIdentifier,
-        dataIndex: 'uniqueId',
-        hidden: true,
-        flex: 1
-    }, {
-        text: Strings.devicePhone,
-        dataIndex: 'phone',
-        hidden: true,
-        flex: 1
-    }, {
-        text: Strings.deviceModel,
-        dataIndex: 'model',
-        hidden: true,
-        flex: 1
-    }, {
-        text: Strings.deviceContact,
-        dataIndex: 'contact',
-        hidden: true,
-        flex: 1
-    }, {
-        text: Strings.deviceLastUpdate,
-        dataIndex: 'lastUpdate',
-        flex: 1,
-        renderer: function (value, metaData, record) {
-            switch (record.get('status')) {
-                case 'online':
-                    metaData.tdCls = 'view-color-green';
-                    break;
-                case 'offline':
-                    metaData.tdCls = 'view-color-red';
-                    break;
-                default:
-                    metaData.tdCls = 'view-color-yellow';
-                    break;
-            }
-            if (Traccar.app.getPreference('twelveHourFormat', false)) {
-                return Ext.Date.format(value, Traccar.Style.dateTimeFormat12);
-            } else {
-                return Ext.Date.format(value, Traccar.Style.dateTimeFormat24);
-            }
-        }
-    }]
+    forceFit: true,
 
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.sharedName,
+            dataIndex: 'name'
+        }, {
+            text: Strings.deviceIdentifier,
+            dataIndex: 'uniqueId',
+            hidden: true
+        }, {
+            text: Strings.devicePhone,
+            dataIndex: 'phone',
+            hidden: true
+        }, {
+            text: Strings.deviceModel,
+            dataIndex: 'model',
+            hidden: true
+        }, {
+            text: Strings.deviceContact,
+            dataIndex: 'contact',
+            hidden: true
+        }, {
+            text: Strings.deviceLastUpdate,
+            dataIndex: 'lastUpdate',
+            renderer: function (value, metaData, record) {
+                switch (record.get('status')) {
+                    case 'online':
+                        metaData.tdCls = 'view-color-green';
+                        break;
+                    case 'offline':
+                        metaData.tdCls = 'view-color-red';
+                        break;
+                    default:
+                        metaData.tdCls = 'view-color-yellow';
+                        break;
+                }
+                if (Traccar.app.getPreference('twelveHourFormat', false)) {
+                    return Ext.Date.format(value, Traccar.Style.dateTimeFormat12);
+                } else {
+                    return Ext.Date.format(value, Traccar.Style.dateTimeFormat24);
+                }
+            }
+        }]
+    }
 });
diff --git a/web/app/view/Geofences.js b/web/app/view/Geofences.js
index 0da87d01..3df21609 100644
--- a/web/app/view/Geofences.js
+++ b/web/app/view/Geofences.js
@@ -37,13 +37,18 @@ Ext.define('Traccar.view.Geofences', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }, {
-        text: Strings.sharedDescription,
-        dataIndex: 'description',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.sharedName,
+            dataIndex: 'name'
+        }, {
+            text: Strings.sharedDescription,
+            dataIndex: 'description'
+        }]
+    }
 });
diff --git a/web/app/view/GroupGeofences.js b/web/app/view/GroupGeofences.js
index 26a16a67..12c785fa 100644
--- a/web/app/view/GroupGeofences.js
+++ b/web/app/view/GroupGeofences.js
@@ -36,9 +36,13 @@ Ext.define('Traccar.view.GroupGeofences', {
         beforeselect: 'onBeforeSelect'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        items: [{
+            text: Strings.sharedName,
+            minWidth: Traccar.Style.columnWidthNormal,
+            dataIndex: 'name'
+        }]
+    }
 });
diff --git a/web/app/view/Groups.js b/web/app/view/Groups.js
index 07345cb0..0c166f1f 100644
--- a/web/app/view/Groups.js
+++ b/web/app/view/Groups.js
@@ -46,9 +46,15 @@ Ext.define('Traccar.view.Groups', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.sharedName,
+            dataIndex: 'name'
+        }]
+    }
 });
diff --git a/web/app/view/Notifications.js b/web/app/view/Notifications.js
index 22b031fa..900ebe3f 100644
--- a/web/app/view/Notifications.js
+++ b/web/app/view/Notifications.js
@@ -34,39 +34,43 @@ Ext.define('Traccar.view.Notifications', {
         markDirty: false
     },
 
-    columns: [{
-        text: Strings.notificationType,
-        dataIndex: 'type',
-        flex: 1,
-        renderer: function (value) {
-            var typeKey = 'event' + value.charAt(0).toUpperCase() + value.slice(1);
-            return Strings[typeKey];
-        }
-    }, {
-        text: Strings.notificationWeb,
-        dataIndex: 'attributes.web',
-        xtype: 'checkcolumn',
-        flex: 1,
-        listeners: {
-            beforeCheckChange: 'onBeforeCheckChange',
-            checkChange: 'onCheckChange'
-        },
-        renderer: function (value, metaData, record) {
-            var fields = this.dataIndex.split('\.', 2);
-            return (new Ext.ux.CheckColumn()).renderer(record.get(fields[0])[fields[1]], metaData);
-        }
-    }, {
-        text: Strings.notificationMail,
-        dataIndex: 'attributes.mail',
-        xtype: 'checkcolumn',
-        flex: 1,
-        listeners: {
-            beforeCheckChange: 'onBeforeCheckChange',
-            checkChange: 'onCheckChange'
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
         },
-        renderer: function (value, metaData, record) {
-            var fields = this.dataIndex.split('\.', 2);
-            return (new Ext.ux.CheckColumn()).renderer(record.get(fields[0])[fields[1]], metaData);
-        }
-    }]
+        items: [{
+            text: Strings.notificationType,
+            dataIndex: 'type',
+            renderer: function (value) {
+                var typeKey = 'event' + value.charAt(0).toUpperCase() + value.slice(1);
+                return Strings[typeKey];
+            }
+        }, {
+            text: Strings.notificationWeb,
+            dataIndex: 'attributes.web',
+            xtype: 'checkcolumn',
+            listeners: {
+                beforeCheckChange: 'onBeforeCheckChange',
+                checkChange: 'onCheckChange'
+            },
+            renderer: function (value, metaData, record) {
+                var fields = this.dataIndex.split('\.', 2);
+                return (new Ext.ux.CheckColumn()).renderer(record.get(fields[0])[fields[1]], metaData);
+            }
+        }, {
+            text: Strings.notificationMail,
+            dataIndex: 'attributes.mail',
+            xtype: 'checkcolumn',
+            listeners: {
+                beforeCheckChange: 'onBeforeCheckChange',
+                checkChange: 'onCheckChange'
+            },
+            renderer: function (value, metaData, record) {
+                var fields = this.dataIndex.split('\.', 2);
+                return (new Ext.ux.CheckColumn()).renderer(record.get(fields[0])[fields[1]], metaData);
+            }
+        }]
+    }
 });
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index f9b79ad6..5851c4c3 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -69,5 +69,15 @@ Ext.define('Traccar.view.Report', {
 
     listeners: {
         selectionchange: 'onSelectionChange'
+    },
+
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [
+        ]
     }
 });
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 67fcf121..224a2a86 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -227,58 +227,48 @@ Ext.define('Traccar.view.ReportController', {
     routeColumns: [{
         text: Strings.positionValid,
         dataIndex: 'valid',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('valid')
     }, {
         text: Strings.positionFixTime,
         dataIndex: 'fixTime',
-        flex: 1,
         xtype: 'datecolumn',
         renderer: Traccar.AttributeFormatter.getFormatter('fixTime')
     }, {
         text: Strings.positionLatitude,
         dataIndex: 'latitude',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('latitude')
     }, {
         text: Strings.positionLongitude,
         dataIndex: 'longitude',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('latitude')
     }, {
         text: Strings.positionAltitude,
         dataIndex: 'altitude',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('altitude')
     }, {
         text: Strings.positionSpeed,
         dataIndex: 'speed',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('speed')
     }, {
         text: Strings.positionAddress,
         dataIndex: 'address',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('address')
     }],
 
     eventsColumns: [{
         text: Strings.positionFixTime,
         dataIndex: 'serverTime',
-        flex: 1,
         xtype: 'datecolumn',
         renderer: Traccar.AttributeFormatter.getFormatter('serverTime')
     }, {
         text: Strings.reportDeviceName,
         dataIndex: 'deviceId',
-        flex: 1,
         renderer: function (value) {
             return Ext.getStore('Devices').findRecord('id', value).get('name');
         }
     }, {
         text: Strings.sharedType,
         dataIndex: 'type',
-        flex: 1,
         renderer: function (value) {
             var typeKey = 'event' + value.charAt(0).toUpperCase() + value.slice(1);
             return Strings[typeKey];
@@ -286,7 +276,6 @@ Ext.define('Traccar.view.ReportController', {
     }, {
         text: Strings.sharedGeofence,
         dataIndex: 'geofenceId',
-        flex: 1,
         renderer: function (value) {
             if (value !== 0) {
                 return Ext.getStore('Geofences').findRecord('id', value).get('name');
@@ -297,86 +286,70 @@ Ext.define('Traccar.view.ReportController', {
     summaryColumns: [{
         text: Strings.reportDeviceName,
         dataIndex: 'deviceId',
-        flex: 1,
         renderer: function (value) {
             return Ext.getStore('Devices').findRecord('id', value).get('name');
         }
     }, {
         text: Strings.sharedDistance,
         dataIndex: 'distance',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('distance')
     }, {
         text: Strings.reportAverageSpeed,
         dataIndex: 'averageSpeed',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('speed')
     }, {
         text: Strings.reportMaximumSpeed,
         dataIndex: 'maxSpeed',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('speed')
     }, {
         text: Strings.reportEngineHours,
         dataIndex: 'engineHours',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('hours')
     }],
 
     tripsColumns: [{
         text: Strings.reportDeviceName,
         dataIndex: 'deviceId',
-        flex: 1,
         renderer: function (value) {
             return Ext.getStore('Devices').findRecord('id', value).get('name');
         }
     }, {
         text: Strings.reportStartTime,
         dataIndex: 'startTime',
-        flex: 1,
         xtype: 'datecolumn',
         renderer: Traccar.AttributeFormatter.getFormatter('startTime')
     }, {
         text: Strings.reportStartAddress,
         dataIndex: 'startAddress',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('address')
     }, {
         text: Strings.reportEndTime,
         dataIndex: 'endTime',
-        flex: 1,
         xtype: 'datecolumn',
         renderer: Traccar.AttributeFormatter.getFormatter('endTime')
     }, {
         text: Strings.reportEndAddress,
         dataIndex: 'endAddress',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('address')
     }, {
         text: Strings.sharedDistance,
         dataIndex: 'distance',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('distance')
     }, {
         text: Strings.reportAverageSpeed,
         dataIndex: 'averageSpeed',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('speed')
     }, {
         text: Strings.reportMaximumSpeed,
         dataIndex: 'maxSpeed',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('speed')
     }, {
         text: Strings.reportDuration,
         dataIndex: 'duration',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('duration')
     }, {
         text: Strings.reportSpentFuel,
         dataIndex: 'spentFuel',
-        flex: 1,
         renderer: Traccar.AttributeFormatter.getFormatter('spentFuel')
     }]
-
 });
diff --git a/web/app/view/State.js b/web/app/view/State.js
index 67cd0753..3356fd72 100644
--- a/web/app/view/State.js
+++ b/web/app/view/State.js
@@ -49,19 +49,24 @@ Ext.define('Traccar.view.State', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.stateName,
-        dataIndex: 'name',
-        flex: 1
-    }, {
-        text: Strings.stateValue,
-        dataIndex: 'value',
-        flex: 1,
-        renderer: function (value, metaData, record) {
-            if (record.get('attribute') === 'alarm') {
-                metaData.tdCls = 'view-color-red';
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.stateName,
+            dataIndex: 'name'
+        }, {
+            text: Strings.stateValue,
+            dataIndex: 'value',
+            renderer: function (value, metaData, record) {
+                if (record.get('attribute') === 'alarm') {
+                    metaData.tdCls = 'view-color-red';
+                }
+                return value;
             }
-            return value;
-        }
-    }]
+        }]
+    }
 });
diff --git a/web/app/view/Statistics.js b/web/app/view/Statistics.js
index 137850ed..7232951a 100644
--- a/web/app/view/Statistics.js
+++ b/web/app/view/Statistics.js
@@ -48,31 +48,32 @@ Ext.define('Traccar.view.Statistics', {
         handler: 'onShowClick'
     }],
 
-    columns: [{
-        text: Strings.statisticsCaptureTime,
-        dataIndex: 'captureTime',
-        flex: 1,
-        xtype: 'datecolumn',
-        renderer: Traccar.AttributeFormatter.defaultFormatter()
-    }, {
-        text: Strings.statisticsActiveUsers,
-        dataIndex: 'activeUsers',
-        flex: 1
-    }, {
-        text: Strings.statisticsActiveDevices,
-        dataIndex: 'activeDevices',
-        flex: 1
-    }, {
-        text: Strings.statisticsRequests,
-        dataIndex: 'requests',
-        flex: 1
-    }, {
-        text: Strings.statisticsMessagesReceived,
-        dataIndex: 'messagesReceived',
-        flex: 1
-    }, {
-        text: Strings.statisticsMessagesStored,
-        dataIndex: 'messagesStored',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.statisticsCaptureTime,
+            dataIndex: 'captureTime',
+            xtype: 'datecolumn',
+            renderer: Traccar.AttributeFormatter.defaultFormatter()
+        }, {
+            text: Strings.statisticsActiveUsers,
+            dataIndex: 'activeUsers'
+        }, {
+            text: Strings.statisticsActiveDevices,
+            dataIndex: 'activeDevices'
+        }, {
+            text: Strings.statisticsRequests,
+            dataIndex: 'requests'
+        }, {
+            text: Strings.statisticsMessagesReceived,
+            dataIndex: 'messagesReceived'
+        }, {
+            text: Strings.statisticsMessagesStored,
+            dataIndex: 'messagesStored'
+        }]
+    }
 });
diff --git a/web/app/view/UserDevices.js b/web/app/view/UserDevices.js
index f5731347..1f68a29a 100644
--- a/web/app/view/UserDevices.js
+++ b/web/app/view/UserDevices.js
@@ -36,13 +36,17 @@ Ext.define('Traccar.view.UserDevices', {
         beforeselect: 'onBeforeSelect'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }, {
-        text: Strings.deviceIdentifier,
-        dataIndex: 'uniqueId',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        items: [{
+            text: Strings.sharedName,
+            minWidth: Traccar.Style.columnWidthNormal,
+            dataIndex: 'name'
+        }, {
+            text: Strings.deviceIdentifier,
+            minWidth: Traccar.Style.columnWidthNormal,
+            dataIndex: 'uniqueId'
+        }]
+    }
 });
diff --git a/web/app/view/UserGeofences.js b/web/app/view/UserGeofences.js
index d90ed1b1..c960accb 100644
--- a/web/app/view/UserGeofences.js
+++ b/web/app/view/UserGeofences.js
@@ -36,9 +36,13 @@ Ext.define('Traccar.view.UserGeofences', {
         beforeselect: 'onBeforeSelect'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        items: [{
+            text: Strings.sharedName,
+            minWidth: Traccar.Style.columnWidthNormal,
+            dataIndex: 'name'
+        }]
+    }
 });
diff --git a/web/app/view/UserGroups.js b/web/app/view/UserGroups.js
index 648ac3f8..6b53dd93 100644
--- a/web/app/view/UserGroups.js
+++ b/web/app/view/UserGroups.js
@@ -36,9 +36,13 @@ Ext.define('Traccar.view.UserGroups', {
         beforeselect: 'onBeforeSelect'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        items: [{
+            text: Strings.sharedName,
+            minWidth: Traccar.Style.columnWidthNormal,
+            dataIndex: 'name'
+        }]
+    }
 });
diff --git a/web/app/view/Users.js b/web/app/view/Users.js
index 28581c59..f4b27337 100644
--- a/web/app/view/Users.js
+++ b/web/app/view/Users.js
@@ -66,17 +66,21 @@ Ext.define('Traccar.view.Users', {
         selectionchange: 'onSelectionChange'
     },
 
-    columns: [{
-        text: Strings.sharedName,
-        dataIndex: 'name',
-        flex: 1
-    }, {
-        text: Strings.userEmail,
-        dataIndex: 'email',
-        flex: 1
-    }, {
-        text: Strings.userAdmin,
-        dataIndex: 'admin',
-        flex: 1
-    }]
+    forceFit: true,
+
+    columns: {
+        defaults: {
+            minWidth: Traccar.Style.columnWidthNormal
+        },
+        items: [{
+            text: Strings.sharedName,
+            dataIndex: 'name'
+        }, {
+            text: Strings.userEmail,
+            dataIndex: 'email'
+        }, {
+            text: Strings.userAdmin,
+            dataIndex: 'admin'
+        }]
+    }
 });
-- 
cgit v1.2.3