While working on a project, I encountered an issue with the scrollHeight of dynamically generated content. In some cases, the function to determine whether or not to include a "more" button in the content would return a value of 0 for scrollHeight, causing the function to break for those elements. It's puzzling to me why this function works most of the time but occasionally fails when the elements clearly have a scrollHeight (as they occupy space on the page).
Here is the function being used:
function hide_show_expand_button(length){
var current_div = '';
var current_span = '';
for(var i = 0; i < length; i++){
if(document.getElementById("message_span"+i)){
current_div = document.getElementById("items_content"+i);
current_span = document.getElementById("message_span"+i);
if(current_span.scrollHeight > 128 && current_div.scrollHeight < 170){
current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_conversation\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
} else if(current_span.scrollHeight > 128 && document.getElementById("items_content"+i).scrollHeight > 200 ){
current_div.innerHTML+="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_attatchment\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
} else if(current_span.scrollHeight > 128 && current_div.scrollHeight < 200){
current_div.innerHTML +="<a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'>More...</a>";
}
}
}
}
This function checks the scrollHeight on both the span and div elements because there are different types of cells being generated, requiring placement of the "more" button in different locations based on the cell type. The function is only called at the end of the content generation process, and even after attempting to use setTimeout(), the issue persists intermittently.
In a more specific scenario, the cells I am measuring are within a containing div that is hidden and shown through various methods. The problem occurs when returning to the container after navigating away, as the scrollHeight values seem to disappear for one case, leading to confusion.
It's worth noting that every time the container is revisited, the cells are rebuilt and my function to get scrollHeight is executed again.