forked from AkkomaGang/akkoma-fe
fixed emoji picker showing up beyond viewport
This commit is contained in:
parent
bed109ae46
commit
81d86a39fe
1 changed files with 17 additions and 3 deletions
|
@ -308,6 +308,17 @@ const EmojiInput = {
|
||||||
} else {
|
} else {
|
||||||
scrollerRef.scrollTop = targetScroll
|
scrollerRef.scrollTop = targetScroll
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const { offsetHeight } = this.input.elm
|
||||||
|
const { picker } = this.$refs
|
||||||
|
console.log(picker)
|
||||||
|
const pickerBottom = picker.$el.getBoundingClientRect().bottom
|
||||||
|
if (pickerBottom > window.innerHeight) {
|
||||||
|
picker.$el.style.top = 'auto'
|
||||||
|
picker.$el.style.bottom = offsetHeight + 'px'
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
onTransition (e) {
|
onTransition (e) {
|
||||||
this.resize()
|
this.resize()
|
||||||
|
@ -421,11 +432,14 @@ const EmojiInput = {
|
||||||
this.caret = selectionStart
|
this.caret = selectionStart
|
||||||
},
|
},
|
||||||
resize () {
|
resize () {
|
||||||
const { panel } = this.$refs
|
const { panel, picker } = this.$refs
|
||||||
if (!panel) return
|
if (!panel) return
|
||||||
const { offsetHeight, offsetTop } = this.input.elm
|
const { offsetHeight, offsetTop } = this.input.elm
|
||||||
this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
|
const offsetBottom = offsetTop + offsetHeight
|
||||||
this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
|
|
||||||
|
panel.style.top = offsetBottom + 'px'
|
||||||
|
picker.$el.style.top = offsetBottom + 'px'
|
||||||
|
picker.$el.style.bottom = 'auto'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue