Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Resolve inconsistency in widths of cloneDiv and textarea elements

Browse Source
This commit is contained in:
Aljaž Grilc 2024-04-03 10:15:11 +02:00
parent 51fdf52fa9
commit 2c40258d19
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
service.js
View File

@ -723,6 +723,9 @@ class BesTAService {
this.textAreaEl.addEventListener('scroll', () => { this.textAreaEl.addEventListener('scroll', () => {
this.cloneDiv.scrollTop = this.textAreaEl.scrollTop this.cloneDiv.scrollTop = this.textAreaEl.scrollTop
}) })
this.textAreaEl.addEventListener('resize', () => {
this.cloneDiv.style.width = this.textAreaEl.clientWidth + 'px'
})
} }
/** /**
@ -735,22 +738,23 @@ class BesTAService {
const cloneDiv = document.createElement('div') const cloneDiv = document.createElement('div')
const textAreaRect = textAreaEl.getBoundingClientRect() const textAreaRect = textAreaEl.getBoundingClientRect()
const scrollTop = window.scrollY || document.documentElement.scrollTop const scrollTop = window.scrollY || document.documentElement.scrollTop
cloneDiv.style.top = `${textAreaRect.top + scrollTop}px`
cloneDiv.style.left = `${textAreaRect.left}px`
const textAreaStyles = window.getComputedStyle(textAreaEl) const textAreaStyles = window.getComputedStyle(textAreaEl)
cloneDiv.style.fontSize = textAreaStyles.fontSize cloneDiv.style.fontSize = textAreaStyles.fontSize
cloneDiv.style.fontFamily = textAreaStyles.fontFamily cloneDiv.style.fontFamily = textAreaStyles.fontFamily
cloneDiv.style.lineHeight = textAreaStyles.lineHeight cloneDiv.style.lineHeight = textAreaStyles.lineHeight
cloneDiv.style.width = textAreaStyles.width const scrollbarWidth = textAreaEl.offsetWidth - textAreaEl.clientWidth
cloneDiv.style.width = textAreaEl.clientWidth - scrollbarWidth + 'px'
cloneDiv.style.height = textAreaStyles.height cloneDiv.style.height = textAreaStyles.height
cloneDiv.style.maxHeight = textAreaStyles.height cloneDiv.style.maxHeight = textAreaStyles.height
cloneDiv.style.padding = textAreaStyles.padding cloneDiv.style.padding = textAreaStyles.padding
cloneDiv.style.margin = textAreaStyles.margin cloneDiv.style.margin = textAreaStyles.margin
cloneDiv.style.overflowY = 'auto' cloneDiv.style.overflowY = 'auto'
cloneDiv.style.position = 'absolute' cloneDiv.style.position = 'absolute'
textAreaEl.style.position = 'relative' cloneDiv.style.top = `${textAreaRect.top + scrollTop}px`
cloneDiv.style.left = `${textAreaRect.left}px`
textAreaEl.style.zIndex = 2 textAreaEl.style.zIndex = 2
textAreaEl.style.position = 'relative'
textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl) textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl)
return cloneDiv return cloneDiv
} }