From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id AA3FE651A5 for ; Mon, 2 Nov 2020 15:01:38 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 9E7FC2376D for ; Mon, 2 Nov 2020 15:01:08 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [212.186.127.180]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id 09BB523760 for ; Mon, 2 Nov 2020 15:01:04 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id C756945D41 for ; Mon, 2 Nov 2020 15:01:03 +0100 (CET) From: Aaron Lauterer To: pve-devel@lists.proxmox.com Date: Mon, 2 Nov 2020 15:01:02 +0100 Message-Id: <20201102140102.26141-2-a.lauterer@proxmox.com> X-Mailer: git-send-email 2.20.1 In-Reply-To: <20201102140102.26141-1-a.lauterer@proxmox.com> References: <20201102140102.26141-1-a.lauterer@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.010 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH widget-toolkit v2] InputPanel: fix column scaling behavior X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Mon, 02 Nov 2020 14:01:38 -0000 When scaling the browsers content either via the browser itself or because the OS has a different scaling / DPI setting, it can happen that not all columns have enough space next to each other and thus the last column is moved further below. This happens especially on chromium bases browsers (e.g. chrome, edge). Changing the layout to use extjs HBOXes with flex instead of columns solves works well. Signed-off-by: Aaron Lauterer --- v1 -> v2: changed approach, use HBOX layouts instead of columns with columnwidths slightly lower than 0.5. src/panel/InputPanel.js | 127 +++++++++++++++++++++++----------------- 1 file changed, 73 insertions(+), 54 deletions(-) diff --git a/src/panel/InputPanel.js b/src/panel/InputPanel.js index 0ac5e48..d5d6186 100644 --- a/src/panel/InputPanel.js +++ b/src/panel/InputPanel.js @@ -82,70 +82,80 @@ Ext.define('Proxmox.panel.InputPanel', { let items; if (me.items) { - me.columns = 1; items = [ { - columnWidth: 1, layout: 'anchor', items: me.items, }, ]; me.items = undefined; } else if (me.column4) { - me.columns = 4; items = [ { - columnWidth: 0.25, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column1, - }, - { - columnWidth: 0.25, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column2, - }, - { - columnWidth: 0.25, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column3, - }, - { - columnWidth: 0.25, - padding: '0 0 0 10', - layout: 'anchor', - items: me.column4, + layout: 'hbox', + defaults: { + border: false, + }, + items: [ + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column1, + }, + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column2, + }, + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column3, + }, + { + flex: 1, + padding: '0 0 0 10', + layout: 'anchor', + items: me.column4, + }, + ], }, ]; if (me.columnB) { items.push({ - columnWidth: 1, padding: '10 0 0 0', layout: 'anchor', items: me.columnB, }); } } else if (me.column1) { - me.columns = 2; items = [ { - columnWidth: 0.5, - padding: '0 10 0 0', - layout: 'anchor', - items: me.column1, - }, - { - columnWidth: 0.5, - padding: '0 0 0 10', - layout: 'anchor', - items: me.column2 || [], // allow empty column + layout: 'hbox', + defaults: { + border: false, + }, + items: [ + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.column1, + }, + { + flex: 1, + padding: '0 0 0 10', + layout: 'anchor', + items: me.column2 || [], // allow empty column + }, + ], }, ]; if (me.columnB) { items.push({ - columnWidth: 1, padding: '10 0 0 0', layout: 'anchor', items: me.columnB, @@ -159,7 +169,6 @@ Ext.define('Proxmox.panel.InputPanel', { if (me.advancedItems) { advItems = [ { - columnWidth: 1, layout: 'anchor', items: me.advancedItems, }, @@ -168,16 +177,27 @@ Ext.define('Proxmox.panel.InputPanel', { } else if (me.advancedColumn1) { advItems = [ { - columnWidth: 0.5, - padding: '0 10 0 0', - layout: 'anchor', - items: me.advancedColumn1, - }, - { - columnWidth: 0.5, - padding: '0 0 0 10', - layout: 'anchor', - items: me.advancedColumn2 || [], // allow empty column + layout: { + type: 'hbox', + align: 'begin', + }, + defaults: { + border: false, + }, + items: [ + { + flex: 1, + padding: '0 10 0 0', + layout: 'anchor', + items: me.advancedColumn1, + }, + { + flex: 1, + padding: '0 0 0 10', + layout: 'anchor', + items: me.advancedColumn2 || [], // allow empty column + }, + ], }, ]; @@ -186,7 +206,6 @@ Ext.define('Proxmox.panel.InputPanel', { if (me.advancedColumnB) { advItems.push({ - columnWidth: 1, padding: '10 0 0 0', layout: 'anchor', items: me.advancedColumnB, @@ -198,7 +217,6 @@ Ext.define('Proxmox.panel.InputPanel', { if (advItems) { me.hasAdvanced = true; advItems.unshift({ - columnWidth: 1, xtype: 'box', hidden: false, border: true, @@ -207,11 +225,9 @@ Ext.define('Proxmox.panel.InputPanel', { }, }); items.push({ - columnWidth: 1, xtype: 'container', itemId: 'advancedContainer', hidden: !me.showAdvanced, - layout: 'column', defaults: { border: false, }, @@ -230,7 +246,10 @@ Ext.define('Proxmox.panel.InputPanel', { }); } else { Ext.apply(me, { - layout: 'column', + layout: { + type: 'vbox', + align: 'stretch', + }, defaultType: 'container', items: items, }); -- 2.20.1