From e3a86973922fa9370900f2e3b07a78222e44b056 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Wed, 29 Jun 2022 14:49:01 +1000 Subject: Remove constant-scrollbar-gap for ancestry-bar Avoided having overflow:auto cause tile-overlapping scrollbar by using less tile-padding. Trying to solve this by dynamically detecting overflow seemed to get messy. --- src/components/AncestryBar.vue | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/components/AncestryBar.vue') diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue index 204798b..c2aadf8 100644 --- a/src/components/AncestryBar.vue +++ b/src/components/AncestryBar.vue @@ -23,7 +23,7 @@ export default defineComponent({ }, computed: { imgSz(){ - return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing*2 - this.uiOpts.scrollGap; + return this.uiOpts.ancestryBarBreadth - this.lytOpts.tileSpacing - this.uiOpts.scrollGap; }, dummyNodes(){ // Childless versions of 'nodes' used to parameterise s return this.nodes.map(n => { @@ -37,10 +37,11 @@ export default defineComponent({ // For child layout display: 'flex', flexDirection: this.vert ? 'column' : 'row', + alignItems: 'center', gap: this.lytOpts.tileSpacing + 'px', padding: this.lytOpts.tileSpacing + 'px', - overflowX: this.vert ? 'hidden' : 'scroll', - overflowY: this.vert ? 'scroll' : 'hidden', + overflowX: this.vert ? 'hidden' : 'auto', + overflowY: this.vert ? 'auto' : 'hidden', // Other backgroundColor: this.uiOpts.ancestryBarBgColor, boxShadow: this.uiOpts.shadowNormal, @@ -50,7 +51,7 @@ export default defineComponent({ watch: { // Used to scroll to end of bar upon node/screen changes nodes(){ - setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added + this.$nextTick(() => this.scrollToEnd()); // Without timeout, seems to run before new tiles are added }, vert(){ setTimeout(() => this.scrollToEnd(), 0); -- cgit v1.2.3