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 is still here. This fiddle illustrates it /. Try to resize the window and click contents several times and see the console.

function rebuild() {
    var transcluded = document.getElementsByTagName('div')[0];
    scope.scrollHeight = transcluded.scrollHeight;
    scope.offsetHeight = transcluded.offsetHeight;
    scope.clientHeight = transcluded.clientHeight;
}

This function is responsible for reading values. The only difference in Angular is that instead of document.getElementsByTagName i do element.children()[n] to get inner element. Also, the element does not respond to scrolling when window is small enough. ScrollTop does not change.

The question is why height is not updated after window reports resize?

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 is still here. This fiddle illustrates it http://jsfiddle/Y8B86/1/. Try to resize the window and click contents several times and see the console.

function rebuild() {
    var transcluded = document.getElementsByTagName('div')[0];
    scope.scrollHeight = transcluded.scrollHeight;
    scope.offsetHeight = transcluded.offsetHeight;
    scope.clientHeight = transcluded.clientHeight;
}

This function is responsible for reading values. The only difference in Angular is that instead of document.getElementsByTagName i do element.children()[n] to get inner element. Also, the element does not respond to scrolling when window is small enough. ScrollTop does not change.

The question is why height is not updated after window reports resize?

• javascript
• html

Share Improve this question Follow edited May 12, 2014 at 8:26 Eugene Kostrikov asked May 12, 2014 at 7:03 Eugene KostrikovEugene Kostrikov 7,10966 gold badges2525 silver badges2525 bronze badges 4

• when do you want the response? just when window is resized? – z.a. Commented May 12, 2014 at 7:28
• 1 The div is not changed in any way on resize, hence the values are kept. – Teemu Commented May 12, 2014 at 7:35
• @z.a. To say the truth, it doesn't matters. I just cannot get why these values do not change. But the main purpose is to handle viewport change and rebuild scrollbar accordingly. – Eugene Kostrikov Commented May 12, 2014 at 7:37
• @Teemu Ok, but if you replace div with body or html in getElementsByTagName nothing happens also – Eugene Kostrikov Commented May 12, 2014 at 7:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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.