Match height of two items being shown/hidden

[Jake Williams]

Plunker

I've made a simple plunker to show what I'm trying to do.  We have data that's being shown that can have various heights and when you click the data it toggles buttons for additional options.  What we want is for the height of the element to be maintained... so in the example, if you click the red box the input will show and the ul will hide, but the black box's height will remain the same.

The only way I can think of doing it would be to loop through the items in the controller and manually set their height through jquery.  ng-style looks like it will work for setting the height of the 2nd div, it's getting the height of the 1st div that's giving me trouble.

[Rhett Lowe]

Why do you need to hide the original data? 

Try a floating overlay. Absolutely position it so that it is where you want and fills the whole space you want. This can all be done in CSS and then you just ng-show/hide it as you see fit. If you wanna get fancy you can even make it translucent. everyone loves playing with alpha!

This way you don't need to care about the height, CSS just makes it the same height and Javascript/Angular turns it on or off. 

-- Rhett :D

[Jake Williams]

| Why do you need to hide the original data? 

There will be several items on the screen and it's for mobile devices, so the size of the item matters.

Overlaying the div worked great.  Thanks for the help.

[Rhett Lowe]

Here is an example :D

http://plnkr.co/edit/P8HxThbhyTmPqsaCNbo5?p=preview