Adjusting the height of a Vue component to 100% triggers a change in height whenever a re-render occurs

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:

https://i.sstatic.net/JchTs.png

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.

https://i.sstatic.net/bNv34.png

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.

javascripthtmlcssvue.jsvue-component

Answer №1

One suggestion is to encapsulate the calculation within a this.$nextTick() callback. This approach allows the DOM update cycle to complete before executing the code, ensuring proper rendering of the element.

By deferring the callback, it ensures execution after the next DOM update cycle

new Vue({
  el: '#app',
  data: {
    pRect: 0
  },
  mounted() {
    this.$nextTick(() => {
      this.pRect = document.querySelector('p').getBoundingClientRect();
    })
  }
})
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<body>
  <div id="app">
    <p>BoundingClientRect Value: {{ pRect }}<p>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

I am facing an issue in Angular 4 where I am attempting to retrieve details from a specific user when clicking on the 'user link profile'. However, I am unable to subscribe to my function because the return value of switchMap is AnonymousSubject ...

javascriptangulartypescriptobservable

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

Trigger a specific directive instance through a function call when a key is pressed on the

Is it possible to trigger a specific directive instance's function when a global keyboard shortcut is pressed and it has the class "focused" based on ng-class? Below is some template code: home.html <body ng-controller="SampleController"> ...

javascriptangularjs

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...

javascriptjquerytwitter-bootstrapbootstrap-4

There is an issue showing up in the console: $(…).datepicker is not defined as a function

I am new to using HTML with JavaScript. I attempted to implement a datepicker, but unfortunately, it is not working as expected. The error message I am receiving is '$(...).datepicker is not a function' in the console. I am utilizing multiple f ...

javascriptjqueryhtml

Update the display using a button without the need to refresh the entire webpage

I am currently working on a website project that requires randomized output. I have successfully implemented a solution using Javascript, but the output only changes when the page is reloaded. Is there a way to update the output without refreshing the en ...

javascript

What could be causing React to not re-render the page when the button is clicked?

function MyApp() { const [usersData, setUsersData] = useState([]) useAsyncEffect(async () => { const response = await fetch('https://jsonplaceholder.typicode.com/users') const users = await response.json() setU ...

javascriptreactjs

A JointJS element with an HTML button that reveals a form when clicked

How do I bind data to a cell and send it to the server using the toJSon() method when displaying a form on the addDetail button inside this element? // Custom view created for displaying an HTML div above the element. // ---------------------------------- ...

javascriptjqueryhtmljointjs

All file upload requests consistently result in a status code of 400

I am encountering an issue with file uploading in Express. Every time I send a request with multipart/form-data, I receive a 400 bad request response with no error message, just an empty object. Currently, I am using busboy-body-parser for parsing multipar ...

javascriptexpressfile-uploadmultipartform-data

Utilizing Radio Buttons for Table Selection in a React Application

Currently, I am utilizing React, MUI, and Formik in my project. My task involves implementing a table where only one radio button can be selected per row. How can I achieve this functionality? If you want to take a look at my code, it's available on ...

javascriptreactjsmaterial-uiformikyup

Implementing AJAX mysqli interaction in PHP following the MVC design pattern

Today I'm encountering yet another AJAX-related error. I am in the process of developing a user registration system using AJAX and PHP, following MVC architecture. Previously, I successfully built a login system without AJAX that functions flawlessl ...

javascriptphpjqueryajaxmysqli

Is it possible to use jQuery to dynamically set the line-height of nested objects in CSS?

I am in the process of creating a horizontal family tree. Where I'm At - I am currently working on setting the CSS Line-Height to vertically center each item based on nested content. The Issue - The Line-Height value for nested items keeps growing e ...

jqueryinheritancenestedcss

Whenever I utilize paesrInt in the POST request, an error occurs. I have included the code below for reference

const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.get("/", function (req, res) { res.sendFile( ...

javascriptnode.jsexpresspostparseint

Inheriting Internet Explorer's zoom level within the WPF web browser control

My WPF window hosts a web browser control for displaying html/css pages, but I'm running into issues with the zoom factor from Internet Explorer. The web browser control seems to be affected by IE's zoom level, causing distortion in the way my HT ...

c#htmlcsswpfinternet-explorer

Trouble with Global Variable Allocation in jQuery Ajax

I've got a script that includes a jQuery Ajax call: <script type="text/javascript"> $(document).ready(function() { var timer; $.ajax({ type: 'POST', url: 'closettime.php', success: function( res ) ...

javascriptjqueryajaxjsonjquery-ajaxq

Error in Passport JS: Trying to use an undefined function

I've been struggling with debugging my code in Express and Passport. I've tried following solutions from others but can't seem to get it right. Any help or useful links would be greatly appreciated. Here is the error message along with the ...

javascriptmongodbexpresspassport.js

Is there a way to dynamically set the value of a React Material TextField in Auto Select mode?

Here is a React state: const [filterByInvoiceNo, setFilterByInvoiceNo] = useState( 0 ); This represents a React Material TextField: <TextField size="small" type="number" label="Invoice No&quo ...

javascriptreactjsmaterial-ui

Tips for restoring lost data from localStorage after leaving the browser where only one data remains

After deleting all bookmark data from localStorage and closing my website tab or Chrome, I am puzzled as to why there is still one remaining data entry when I revisit the site, which happens to be the most recently deleted data. This is the code snippet I ...

javascriptreactjsnext.js

How can I retrieve data during a double-click event in Kendo Grid using Angular?

How can I retrieve data on the doubleClick event in a Kendo Grid? I want to access the same object that is fetched during the selected event, which would be the dataitem at the selected index row. HTML: <kendo-grid #myGrid [data]="gridDat ...

javascriptangulartypescriptkendo-uikendo-grid

Having trouble getting the vue-slick-carousel to function properly when using it from the CDN

Struggling to implement a small app using the CDN script at , but so far no success. I'm a novice with vue.js and unsure if I need to import anything. According to the documentation, importing is required: Vue-slick-carousel Following this structure ...

javascriptvue.js