Resolve inconsistency in widths of cloneDiv and textarea elements
This commit is contained in:
parent
51fdf52fa9
commit
2c40258d19
14
service.js
14
service.js
@ -723,6 +723,9 @@ class BesTAService {
|
||||
this.textAreaEl.addEventListener('scroll', () => {
|
||||
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 textAreaRect = textAreaEl.getBoundingClientRect()
|
||||
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)
|
||||
cloneDiv.style.fontSize = textAreaStyles.fontSize
|
||||
cloneDiv.style.fontFamily = textAreaStyles.fontFamily
|
||||
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.maxHeight = textAreaStyles.height
|
||||
cloneDiv.style.padding = textAreaStyles.padding
|
||||
cloneDiv.style.margin = textAreaStyles.margin
|
||||
cloneDiv.style.overflowY = 'auto'
|
||||
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.position = 'relative'
|
||||
textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl)
|
||||
return cloneDiv
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user