From 8eeeae7fbf376af374613c43d82255bed9c0dd93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?= Date: Sun, 24 Oct 2021 23:56:46 +0200 Subject: [PATCH] (core) Fixing scrollbars on ace editor for windows users. Summary: Fixing formula editor scrollbars for windows users. Test Plan: Manual Reviewers: georgegevoian Reviewed By: georgegevoian Subscribers: georgegevoian Differential Revision: https://phab.getgrist.com/D3087 --- app/client/components/AceEditor.js | 10 ++++++++-- app/client/widgets/TextEditor.css | 3 +++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/app/client/components/AceEditor.js b/app/client/components/AceEditor.js index 8001fc08..80ca1030 100644 --- a/app/client/components/AceEditor.js +++ b/app/client/components/AceEditor.js @@ -245,8 +245,14 @@ AceEditor.prototype.resize = function() { size = this.calcSize(this._fullDom, desiredSize); } - this.editorDom.style.width = size.width ? size.width + 'px' : 'auto'; - this.editorDom.style.height = size.height + 'px'; + // Setting height or width to number like 100.00000005 won't work (it will be truncated). + // Unfortunately ace editor will do the same math we do, and will expect the height or width + // of the container to be 100.0000005, and when it finds out that it is only 100px will show + // scrollbars. To fix this issue we will make the container a little bit bigger. + // This won't help for zooming (where the same problem occurs but in many more places), but will + // help for Windows users who have different pixel ratio. + this.editorDom.style.width = size.width ? Math.ceil(size.width) + 'px' : 'auto'; + this.editorDom.style.height = Math.ceil(size.height) + 'px'; this.editor.resize(); }; diff --git a/app/client/widgets/TextEditor.css b/app/client/widgets/TextEditor.css index 60b3b240..70642572 100644 --- a/app/client/widgets/TextEditor.css +++ b/app/client/widgets/TextEditor.css @@ -33,10 +33,13 @@ } +/* Make overflow hidden, since editor might be 1 pixel bigger due to fix for devices + * with different pixel ratio */ .formula_editor { background-color: white; padding: 4px 0 2px 21px; z-index: 10; + overflow: hidden; } /* styles specific to the formula editor in the side panel */