In my Vue component, there is a class called "tab-body-wrapper" that serves the purpose of displaying the "slot" for the active tab. However, I encountered an issue while troubleshooting where the height of the ".tab-body-wrapper" component reduces during the v-if re-render, even though its containing element (".sub-menu-tabs-body") maintains the same height at that moment.
The problem arose despite setting the height of ".tab-body-wrapper" to 100% in my CSS.
Here is a snippet of my Vue component with the class "tab-body-wrapper":
Vue.component("tab", {
template: `
<div v-if="isActive"
class="tab-body-wrapper">
<slot></slot>
</div>
`,
props: {
name: { required: true },
icon: { required: true },
selected: { default: false }
},
data() {
return {
isActive: false
}
},
mounted() {
this.isActive = this.selected;
}
});
The diagram below indicates the position of this Vue component in the DOM:
Here is the relevant CSS code:
.sub-menu-tabs-wrapper,
.sub-menu-tabs-body,
.tab-body-wrapper {
height: 100%;
}
To troubleshoot, I added the following code in the mounted() hook of another Vue component placed within the slot of the aforementioned Vue component.
Below is the troubleshooting code from the mounted hook of the nested Vue component: It's worth noting that I also utilized getBoundingClientRect and received consistent results, indicating that the issue does not lie with d3.
console.log(d3.select(".sub-menu-tabs-wrapper").style("height"));
console.log(d3.select(".sub-menu-tabs-body").style("height"));
console.log(d3.select(".tab-body-wrapper").style("height"));
Upon initial render, the heights were as follows:
scripts.js:791 1207px // .sub-menu-tabs-wrapper
scripts.js:792 1153px // .sub-menu-tabs-body
scripts.js:793 1151px // .tab-body-wrapper
However, upon toggling away and back to the tab, the container (".sub-menu-tabs-body") remained at 1153px, while ".tab-body-wrapper" shrunk to 574.5px.
scripts.js:791 1207px // .sub-menu-tabs-wrapper
scripts.js:792 1153px // .sub-menu-tabs-body
scripts.js:793 574.5px // .tab-body-wrapper
What's peculiar is that subsequent console logging of ".tab-body-wrapper" returns a height of 1151px.
It's essential for the correct rendering of my d3 charts, which rely on accurate height and width calculations within ".tab-body-wrapper". The current inconsistency is causing these charts to display incorrect dimensions during rendering.
Note: Using v-show for the tab component is not viable due to undisclosed reasons.