I have been attempting to determine the heights and widths of the items in my list. Despite exploring various methods for obtaining the height and width of an item, none of them seemed to provide the scrollHeight directly from the element.
Upon inspecting the scrollHeight using the console, I observed:
[div.class-name, context: ...]
0: div.className.className2
accessKey: ""
....
scrollHeight: 176
scrollWidth: 276
....
Subsequently, I used the following code to display these values:
angular.module('app').directive('temp', function () {
return {
restrict: 'E',
templateUrl: 'link/to/template',
replace: 'true',
link: function(scope, element) {
console.log(element);
console.log(element.prop('scrollHeight'));
console.log(element.prop('scrollWidth'));
}
};
});
The output displayed:
112 (height)
304 (width)
Interestingly, these same values were returned for EVERY list item in the unordered list, despite discrepancies in their actual heights/widths due to margins or padding not being applied.
These values are crucial for updating the CSS. Is there an alternative method to obtain this information? Any hints on what might be causing this inconsistency?