diff --git a/src/assets/styles/tables.css b/src/assets/styles/tables.css index 9a7c7cb..f577ad3 100644 --- a/src/assets/styles/tables.css +++ b/src/assets/styles/tables.css @@ -9,7 +9,7 @@ .header-container { overflow: hidden; position: absolute; - top: -1px;; + top: -1px; left: -1px; width: calc(100% + 2px); padding-left: 7px; @@ -18,10 +18,17 @@ border-radius: 5px 5px 0 0; } +@supports (-moz-appearance:none) { + .header-container { + top: 0; + padding-left: 6px; + } +} + .header-container > div { display: flex; width: fit-content; - padding-right: 10px; + padding-right: 30px; } .table-container { width: 100%; diff --git a/src/components/SqlTable.vue b/src/components/SqlTable.vue index e9cf91e..3743648 100644 --- a/src/components/SqlTable.vue +++ b/src/components/SqlTable.vue @@ -83,7 +83,7 @@ export default { this.tableWidth = this.$refs['table-container'].offsetWidth this.$nextTick(() => { this.header = this.$refs.th.map(th => { - return { name: th.innerText, width: th.offsetWidth } + return { name: th.innerText, width: th.getBoundingClientRect().width } }) }) }, diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue index 5d0ce7a..4ff9c05 100644 --- a/src/views/MyQueries.vue +++ b/src/views/MyQueries.vue @@ -226,16 +226,17 @@ export default { this.queries = JSON.parse(localStorage.getItem('myQueries')) || [] }, mounted () { - this.resizeObserver = new ResizeObserver(() => { - this.calcNameWidth() - this.calcMaxTableHeight() - }) + this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight) this.resizeObserver.observe(this.$refs['my-queries-content']) + + this.tableResizeObserver = new ResizeObserver(this.calcNameWidth) + this.tableResizeObserver.observe(this.$refs.table) this.calcNameWidth() this.calcMaxTableHeight() }, beforeDestroy () { this.resizeObserver.unobserve(this.$refs['my-queries-content']) + this.tableResizeObserver.unobserve(this.$refs.table) }, filters: { date (value) { @@ -254,7 +255,9 @@ export default { }, methods: { calcNameWidth () { - const nameWidth = this.$refs['name-td'] ? this.$refs['name-td'][0].offsetWidth : 0 + const nameWidth = this.$refs['name-td'] + ? this.$refs['name-td'][0].getBoundingClientRect().width + : 0 this.$refs['name-th'].style = `width: ${nameWidth}px` }, calcMaxTableHeight () { @@ -382,8 +385,8 @@ export default { importQueries () { const file = this.$refs.importFile.files[0] const reader = new FileReader() - reader.onload = () => { - let importedQueries = JSON.parse(event.target.result) + reader.onload = (e) => { + let importedQueries = JSON.parse(e.target.result) if (!Array.isArray(importedQueries)) { importedQueries = [importedQueries]