CODEWITHSUNDEEP
javascriptcssvue.jsbootstrap-4
Irene Park
Irene Park

Reputation: 53

Bootstrap Vue How to get a height of the card

I am trying to use the card component in bootstrap-vue. I want to get the height of the card after it is rendered since the height changes based on the amount of text in it. What would be a solution?

Upvotes: 0

Views: 304

Answers (1)

Niels
Niels

Reputation: 49919

You can do a watch on your model.

watch : {
    'modelThatChanges'() {
        var height = document.getElementById("idOfCard").offsetHeight; // includes border and padding
        console.log(height)
    }
}

If this gives an issue that it presents the last value and not the new height. You have to do a Vue.nextTick and it will look like:

watch : {
    'modelThatChanges'() {
        Vue.nextTick(() => {
            var height = document.getElementById("idOfCard").offsetHeight; // includes border and padding
            console.log(height)
        });
    }
}

Upvotes: 3

Related Questions