Set one element’s height as height to other elements using angularjs

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.

Prerequisites

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).

Params

  • ‘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.

Implementation Detail

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.

Code

You can also find the code on GitHub. Mention in comments if this was useful to you. Any feedback and suggestions would be appreciated.