Adjust the height of a Vue.js div element

Question

Adjust the height of a Vue.js div element

I am currently working with Vue.js and I need to adjust the height of one div based on the height of another div using pure JavaScript. The issue I am encountering is that I am unable to set the height using plain JavaScript, however it works fine with jQuery. Can someone help me convert this jQuery code to JavaScript? Below is the code snippet I am using:

Vue.nextTick(function () {
            var offsetHeight = document.getElementById('filterSection').offsetHeight;
            document.querySelector(".searchResultSection").style.maxHeight = `calc(100% - ${offsetHeight}px)`;
           });

I am looking to replace the jQuery part with vanilla JavaScript.

javascript vue.js

Answer 1

Answer №1

When it comes to solving your issue, computed properties (https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties) are the ideal solution:

Create a computed property that will determine the filterSectionHeight

export default {
  name: "App",

  computed: {
    filterSectionHeight() {
      const filterSectionDOM = document.getElementById("filterSection");
      return filterSectionDOM ? filterSectionDOM.offsetHeight : 0;   
    },
  }
};

Include the divs filterSection and searchResultsSection in your component (or App component), remember to add a :style attribute to handle the dynamic max-height for .searchResultsSection in your template

<div id="filterSection"></div>
<div class="searchResultsSection"
     :style="{
            'max-height': `calc(100% - ${filterSectionHeight}px)`
     }">
</div>

Ensure both divs have a height of 100% in your CSS

#app {
  height: 600px;
  width: 100%;
}

#filterSection {
  height: 100%;
  background: rebeccapurple; //https://en.wikipedia.org/wiki/Eric_A._Meyer
}

.searchResultsSection{
  height: 100%;
  background: rebeccapurple;
  opacity: 0.6;
}

You can see a complete demonstration here > https://codesandbox.io/s/1rkmwo1wq

Answer 2

When it comes to solving your issue, computed properties (https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties) are the ideal solution:

Create a computed property that will determine the filterSectionHeight

export default {
  name: "App",

  computed: {
    filterSectionHeight() {
      const filterSectionDOM = document.getElementById("filterSection");
      return filterSectionDOM ? filterSectionDOM.offsetHeight : 0;   
    },
  }
};

Include the divs filterSection and searchResultsSection in your component (or App component), remember to add a :style attribute to handle the dynamic max-height for .searchResultsSection in your template

<div id="filterSection"></div>
<div class="searchResultsSection"
     :style="{
            'max-height': `calc(100% - ${filterSectionHeight}px)`
     }">
</div>

Ensure both divs have a height of 100% in your CSS

#app {
  height: 600px;
  width: 100%;
}

#filterSection {
  height: 100%;
  background: rebeccapurple; //https://en.wikipedia.org/wiki/Eric_A._Meyer
}

.searchResultsSection{
  height: 100%;
  background: rebeccapurple;
  opacity: 0.6;
}

You can see a complete demonstration here > https://codesandbox.io/s/1rkmwo1wq

Answer 3

Answer №2

Uncertain about the background of this modification, but I will provide some suggestions on how to accomplish it following best practices:

If the parent element has a fixed height, then children with height: 100% will inherit the parent's height.

.parent { height: 200px; }

.child { height: 100%; }
Consider using a vue-directive for manipulating the DOM: https://v2.vuejs.org/v2/guide/custom-directive.html
Utilize v-bind:style="height: calc(100% - ${offsetHeight}px)\" on the specific element you intend to adjust the height of!

Answer 4

Uncertain about the background of this modification, but I will provide some suggestions on how to accomplish it following best practices:

If the parent element has a fixed height, then children with height: 100% will inherit the parent's height.

.parent { height: 200px; }

.child { height: 100%; }
Consider using a vue-directive for manipulating the DOM: https://v2.vuejs.org/v2/guide/custom-directive.html
Utilize v-bind:style="height: calc(100% - ${offsetHeight}px)\" on the specific element you intend to adjust the height of!

Answer 5

Answer №3

To achieve this, you should utilize the JavaScript DOM method. Give this a shot.

Vue.nextTick(function () {
   var offsetHeight = document.getElementById('filterSection').offsetHeight;
   var x = document.getElementsByClassName("searchResultSection");
   x[0].style.maxHeight = "calc(100% - ${offsetHeight}px)";
});

Answer 6

To achieve this, you should utilize the JavaScript DOM method. Give this a shot.

Vue.nextTick(function () {
   var offsetHeight = document.getElementById('filterSection').offsetHeight;
   var x = document.getElementsByClassName("searchResultSection");
   x[0].style.maxHeight = "calc(100% - ${offsetHeight}px)";
});

Adjust the height of a Vue.js div element

Answer №1

Answer №2

Answer №3

Similar questions

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

SWR failing to function effectively when used with asynchronous fetch operations

Send certain attributes from the main component to the subcomponent

Using Vue to customize and edit a Google Maps marker

Angular is not providing the anticipated outcome

What is preventing me from utilizing Jinja in JavaScript for a django website?

Implementing siteSpeedSampleRate in Google Analytics with AngularJS - a step-by-step guide

Utilizing multiple interactive dialog boxes with content pulled from JSON source

How can one choose the current element in jQuery.Treeview following a jQuery.load(html) event?

Is it possible to replicate a stale closure similar to React's useEffect hook without the use of the useEffect hook?

Unexpected behavior with MongoDB update function

Can you explain the distinction between "(.....);" and "{......}" within the context of React?

Set all form fields to ng-touched programmatically when the form is submitted

What could be causing the issue with my code where the canvas is not showing boxes beyond a y-coordinate of 8 along the x-axis?

Using a text box in jQuery to perform basic calculations is a straightforward process

Preventing hyperlinks within a table from being recognized as the selected table row

JQuery was partially activated

Every individual child component must be assigned a distinct key prop, even if they are pre-defined. - Utilizing REACT

Modify URL parameters in Vue.js based on specific conditions to remove key-value pairs

Tips for invoking a URL in an Ajax JSON request