Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Adding more space for text editor to avoid scrollbars

Browse Source 
Summary:
For Windows and Ubuntu (on chrome) texteditor was showing scrollbars for
very long words. Adding more space to fix this issue.

Test Plan: manual

Reviewers: dsagal

Reviewed By: dsagal

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D3122
This commit is contained in:
Jarosław Sadziński 2021-11-05 22:08:20 +01:00
parent 45fc46070d
commit b6dd066b7f
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/client/widgets/NTextEditor.ts
View File

@ -4,7 +4,7 @@
import {createGroup} from 'app/client/components/commands'; import {createGroup} from 'app/client/components/commands';
import {testId} from 'app/client/ui2018/cssVars'; import {testId} from 'app/client/ui2018/cssVars';
import {createMobileButtons, getButtonMargins} from 'app/client/widgets/EditorButtons'; import {createMobileButtons, getButtonMargins} from 'app/client/widgets/EditorButtons';
import {EditorPlacement} from 'app/client/widgets/EditorPlacement'; import {EditorPlacement, ISize} from 'app/client/widgets/EditorPlacement';
import {NewBaseEditor, Options} from 'app/client/widgets/NewBaseEditor'; import {NewBaseEditor, Options} from 'app/client/widgets/NewBaseEditor';
import {CellValue} from "app/common/DocActions"; import {CellValue} from "app/common/DocActions";
import {undef} from 'app/common/gutil'; import {undef} from 'app/common/gutil';
@ -129,5 +129,23 @@ export class NTextEditor extends NewBaseEditor {
const size = this._editorPlacement.calcSizeWithPadding(textInput, rect); const size = this._editorPlacement.calcSizeWithPadding(textInput, rect);
textInput.style.width = size.width + 'px'; textInput.style.width = size.width + 'px';
textInput.style.height = size.height + 'px'; textInput.style.height = size.height + 'px';
// Scrollbars are first visible (as the content get larger), but resizing should hide them (if there is enough
// space), but this doesn't work in Chrome on Windows or Ubuntu (but works on Mac). Here if scrollbars are visible,
// but we got same enough spaces, we will force browser to check the available space once more time.
if (enoughSpace(rect, size) && hasScroll(textInput)) {
textInput.style.overflow = "hidden";
textInput.clientHeight; // just access metrics is enough to repaint
textInput.style.overflow = "auto";
} }
} }
}
function enoughSpace(requested: ISize, received: ISize) {
return requested.width <= received.width && requested.height <= received.height;
}
function hasScroll(el: HTMLTextAreaElement) {
// This is simple check for dimensions, scrollbar will appear when scrollHeight > clientHeight
return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
}