public inbox for pve-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Aaron Lauterer <a.lauterer@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH manager] ui: fix column behavior with browser scaling
Date: Fri, 30 Oct 2020 13:48:37 +0100	[thread overview]
Message-ID: <20201030124838.23655-1-a.lauterer@proxmox.com> (raw)

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@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





             reply	other threads:[~2020-10-30 12:48 UTC|newest]

Thread overview: 3+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2020-10-30 12:48 Aaron Lauterer [this message]
2020-10-30 12:48 ` [pve-devel] [PATCH widget-toolkit] InputPanel: fix column scaling behavior Aaron Lauterer
2020-11-02 10:07 ` [pve-devel] [PATCH manager] ui: fix column behavior with browser scaling Aaron Lauterer

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20201030124838.23655-1-a.lauterer@proxmox.com \
    --to=a.lauterer@proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal