If we have an element whose height changes as per the content within it. And we would like to have other elements height to be same as this element. We can achieve this with an angular directive.
Place the following directive onto the parent element of the main element(whose height is to be computed) and other elements(whose height is to be set).
- ‘main’ CSS Selector for element whose height is to be set on other elements
- ‘others’ Array of CSS Selector of elements whose height is to be set
- ‘offset’ Any variance required from the height being set to the element. Pass ‘negative’ value if you want to increase the elements height.
We determine the main elements height. Look for other elements and set the main elements height to this element. If there exist and offset difference to be applied, we substract the offset from the given elements height.
You can also find the code on GitHub
Mention in comments if this was useful to you. Any feedback and suggestions would be appreciated.