offsetHeight / clientHeight / scrollHeight never change

Question

I\'m building a scrolling directive with Angular and see a strange behavior of element heights. They do not change on resize. I went down to the simplest plain JS, but the bug i

Answer 1

I believe that the problem is that you're expecting scrollHeight, offsetHeight, and clientHeight to change based on the windows size which in fact this is not the case.

The scrollHeight is "a measurement of the height of an element's content including content not visible on the screen due to overflow" (reference).

The offsetHeight is "the height of the element including vertical padding and borders, in pixels, as an integer" (reference).

The clientHeight is "the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin"(reference).

All three of these are relative to the element for which they are called on. Since it doesn't seem like you have set a relative height for the elements, you will not see any change to their scrollHeight, offsetHeight, or clientHeight. In other words, the elements currently have fixed heights based on the content within them.

You can see this when you make the screen so small that the 'click me' goes across two lines, then your values change.

Answer 2

you can plug this into your link function in your directive,

angular.element($window).bind('resize', function () {
   rebuild();
});

make sure to inject $window into the directive function, and just call rebuild or another function inside. of course, you should also change the transcluded to the appropriate angularJS form.