CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.js
Teodor
Teodor

Reputation: 95

Div that should only grow in height while elements are added to it, and keep the previoused increased height value if items are removed

So, I have a div (v-chip-group) that modifies it's height based on it's content. It increases when there is more content added to it and decreases when it's less.

The thing I'm trying to do is that I want to make it so that it only increases it's height, and if some items are removed, just keep the last updated height to it.

For example :

Here the height of my div is 40px when i have 3 shapes added

Here the height of my div is 40px when i have 3 shapes added

I add a few more shapes and the height increases to 72px enter image description here

Now, if I delete some of them and they don't need to be on more than 1 line, the div goes back to 40px enter image description here

Like I was saying above, I want to keep the highest value of the div height (in this example 72px) even if my shapes need only one line to be displayed on.

I mention the fact that I'm working in VueJS and flex-shirnk: 0 / flex-grow: 1 did not work for me, and I also tried assigning an 'ref' to my v-chip-group element, and use a getter to update it's value in real-time but for whatever reason I cannot access the clientHeight property...

Can someone please give me a hint on how can I achieve this? Thank you in advance!

Upvotes: 0

Views: 69

Answers (1)

Esger
Esger

Reputation: 1417

You will have to write some javascript to set the height property of the container every time an item is added so that when items are removed, the height of the container is maintained not by it's content but by it's style.height property.

Upvotes: 2

Related Questions