Get element height using Vuejs
I want to get the height of a div in order to make the height of another div corresponding to it. I used clientHeight method but it doesn't return good value for me (lower value). In fact, it seems to be returning the height before all the elements are charged. After doing some research on the internet, I tried to put window.load () on a delay until everything is charged, but that doesn't work. Some ideas?
mounted () {
this.matchHeight()
},
matchHeight () {
let height = document.getElementById('info-box').clientHeight
}
<div class="columns">
<div class="left-column" id="context">
<p>Some text</p>
</div>
<div class="right-column" id="info-box">
<img />
<ul>
some list
</ul>
</div>
</div>
source to share
The way you do it is fine. But there is another vue way with an attribute ref
.
mounted () {
this.matchHeight()
},
matchHeight () {
let height = this.$refs.infoBox.clientHeight;
}
<div class="columns">
<div class="left-column" id="context">
<p>Some text</p>
</div>
<div class="right-column" id="info-box" ref="infoBox"></>
<img />
<ul>
some list
</ul>
</div>
</div>
In this case, since you are just getting the value, it doesn't really matter if you are using your original approach getElementById
or a ref
vue- specific approach . However, if you were setting a value for an element, it is much better to use an approach ref
so that vue understands that the value has changed and cannot overwrite the value with the original value if it needs to update that node value in the DOM.
You can read more here: https://vuejs.org/v2/api/#vm-refs
Update
Several people left comments that the above solution did not work for them. This solution provided the concept, but not complete working code as an example, so I added my answer with the code below that demonstrates the concepts.
var app = new Vue({
el: '#app',
data: function () {
return {
leftColStyles: { },
lines: ['one', 'two','three']
}
},
methods: {
matchHeight() {
var heightString = this.$refs.infoBox.clientHeight + 'px';
Vue.set(this.leftColStyles, 'height', heightString);
}
},
mounted() {
this.matchHeight();
}
});
.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }
<div id="app">
<div class="columns">
<div class="left-column" id="context" v-bind:style="leftColStyles">
<p>Some text</p>
</div>
<div class="right-column" id="info-box" ref="infoBox">
<img />
<ul>
<li v-for="line in lines" v-text="line"></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script>
Here's a screenshot of the results in a browser:
source to share
I would use flexbox to get columns with the same height https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
}
.column {
border: 1px solid;
padding: 20px;
width: 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
sit amet ornare fringilla, ligula quam faucibus urna
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</body>
</html>
source to share