I am looking to determine the actual height of the content within a table cell that has nested child items with overflow:hidden styles. Here is an example of the structure:
<tr>
<td id="targetid">
<div id="innertargetdiv">
<div id="targetiddiv" style="overflow:hidden; max-height:50px;">
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
Thiscell<br>
</div>
</div>
</td>
<td>Smith</td>
<td>50</td>
</tr>
Here is the JavaScript code I am using:
console.log(document.getElementById("targetid").scrollHeight);
console.log(document.getElementById("innertargetdiv").scrollHeight);
console.log(document.getElementById("targetiddiv").scrollHeight);
Output: 51 50 100
I am trying to find a way to get the total height from the "#targetid" level without expanding the content to fill the entire cell. Any suggestions on how to achieve this? I am open to AngularJS/JQuery solutions as well.
One possible recursive solution for this problem can be seen below:
var totalHeight: (any) => number = (e) => {
var eHeight = 0;
if (e.hasChildNodes()) {
eHeight = $.map(e.children, (child) => totalHeight(child))
.reduce((sum: number, value: number) => sum + value, 0);
}
//The height of the child elements might be smaller than the element with padding
return Math.max.apply(Math, [eHeight, e.scrollHeight]);
};