supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3033 from thelounge/xpaw/fix-input-overflow

Browse Source 
Fix up textarea growing to avoid rounding issues in Chrome
This commit is contained in:
Jérémie Astori 2019-02-08 01:00:15 -05:00 committed by GitHub
commit e4209714ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/css/style.css
View File

@ -1983,7 +1983,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
min-height: 19px; /* Required when computing input height at char deletion */ min-height: 19px; /* Required when computing input height at char deletion */
height: 19px; height: 19px;
max-height: 95px; /* min-height/height x number of lines maximum */ max-height: 95px; /* min-height/height x number of lines maximum */
line-height: 19px /* should match height */; line-height: 19px; /* should match height */
outline: none; outline: none;
margin: 5px; margin: 5px;
padding: 0; padding: 0;

13
client/js/lounge.js
View File

@ -82,23 +82,22 @@ $(function() {
}); });
function resetInputHeight(input) { function resetInputHeight(input) {
input.style.height = input.style.minHeight; input.style.height = "";
} }
const input = $("#input") const input = $("#input")
.on("input", function() { .on("input", function() {
const style = window.getComputedStyle(this); const style = window.getComputedStyle(this);
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
// Start by resetting height before computing as scrollHeight does not // Start by resetting height before computing as scrollHeight does not
// decrease when deleting characters // decrease when deleting characters
resetInputHeight(this); resetInputHeight(this);
this.style.height = Math.min( // Use scrollHeight to calculate how many lines there are in input, and ceil the value
Math.round(window.innerHeight - 100), // prevent overflow // because some browsers tend to incorrently round the values when using high density
this.scrollHeight // displays or using page zoom feature
+ Math.round(parseFloat(style.borderTopWidth) || 0) this.style.height = Math.ceil(this.scrollHeight / lineHeight) * lineHeight + "px";
+ Math.round(parseFloat(style.borderBottomWidth) || 0)
) + "px";
chat.find(".chan.active .chat").trigger("keepToBottom"); // fix growing chat.find(".chan.active .chat").trigger("keepToBottom"); // fix growing
}); });