[pve-devel] [PATCH manager] ui: fix column behavior with browser scaling

Aaron Lauterer a.lauterer at proxmox.com
Fri Oct 30 13:48:37 CET 2020


especially on chromium based browser (e.g. chrome, edge) it can happen,
depending on the zoom level, that the last column does not fit next to
the other columns and is moved below the other columns.

This results in an ugly looking UI and in the worst case makes it
unusable.

This can also be triggered if the monitor is set to a higher scaling /
different DPI settings. I was able to have the same problem in Edge when
setting the scaling in the windows display settings to 125%.

Setting the column width to a little bit less than 0.5 avoids this
problem.

Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
---
 www/manager6/window/Clone.js    | 4 ++--
 www/manager6/window/Migrate.js  | 4 ++--
 www/manager6/window/Settings.js | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/www/manager6/window/Clone.js b/www/manager6/window/Clone.js
index 5c6c2f75..836a3025 100644
--- a/www/manager6/window/Clone.js
+++ b/www/manager6/window/Clone.js
@@ -265,13 +265,13 @@ Ext.define('PVE.window.Clone', {
 	    },
 	    items: [
 		{
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    padding: '0 10 0 0',
 		    layout: 'anchor',
 		    items: col1
 		},
 		{
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    padding: '0 0 0 10',
 		    layout: 'anchor',
 		    items: col2
diff --git a/www/manager6/window/Migrate.js b/www/manager6/window/Migrate.js
index 3096dd1a..8ac1a173 100644
--- a/www/manager6/window/Migrate.js
+++ b/www/manager6/window/Migrate.js
@@ -314,7 +314,7 @@ Ext.define('PVE.window.Migrate', {
 	    items: [
 		{
 		    xtype: 'container',
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    items: [{
 			xtype: 'displayfield',
 			name: 'source',
@@ -334,7 +334,7 @@ Ext.define('PVE.window.Migrate', {
 		},
 		{
 		    xtype: 'container',
-		    columnWidth: 0.5,
+		    columnWidth: 0.495,
 		    items: [{
 			xtype: 'pveNodeSelector',
 			reference: 'pveNodeSelector',
diff --git a/www/manager6/window/Settings.js b/www/manager6/window/Settings.js
index e3519b1f..ab40af6f 100644
--- a/www/manager6/window/Settings.js
+++ b/www/manager6/window/Settings.js
@@ -185,7 +185,7 @@ Ext.define('PVE.window.Settings', {
 
     items: [{
 	xtype: 'fieldset',
-	columnWidth: 0.5,
+	columnWidth: 0.495,
 	title: gettext('Webinterface Settings'),
 	margin: '5',
 	layout: {
@@ -311,7 +311,7 @@ Ext.define('PVE.window.Settings', {
     {
 	xtype: 'container',
 	layout: 'vbox',
-	columnWidth: 0.5,
+	columnWidth: 0.495,
 	margin: '5',
 	defaults: {
 	    width: '100%',
-- 
2.20.1






More information about the pve-devel mailing list