Databases
StackOverflow2013
Postsdbo
POchecking for scrollHeight of an element sometimes returning 0
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POchecking for scrollHeight of an element sometimes returning 0
    primarykey
    data
    text
    <p>So I am checking the the scrollHeight of some dynamically generated content to determine whether or not to include a more button in the content. The user can click the more button to expand the content and see everything inside. However using the same function every time sometimes it says the scrollHeight of the elements is 0 which needless to say breaks the function for those elements. I am beyond boggled as to why this function would work 90% of the time but sometimes say the elements don't have a scrollHeight when they clearly do (they take up space on the page).</p> <p>Here is the function:</p> <pre><code>function hide_show_expand_button(length){ var current_div = ''; var current_span = ''; //console.log(length); for(var i = 0; i &lt; length; i++){ if(document.getElementById("message_span"+i)){ current_div = document.getElementById("items_content"+i); current_span = document.getElementById("message_span"+i); console.log(current_div.scrollHeight, "height of the div") if(current_span.scrollHeight &gt; 128 &amp;&amp; current_div.scrollHeight &lt; 170){ console.log("inside of the check for the conversation screen"); current_div.innerHTML +="&lt;a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_conversation\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'&gt;More...&lt;/a&gt;"; } else if(current_span.scrollHeight &gt; 128 &amp;&amp; document.getElementById("items_content"+i).scrollHeight &gt; 200 ){ current_div.innerHTML+="&lt;a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button_attatchment\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'&gt;More...&lt;/a&gt;"; } else if(current_span.scrollHeight &gt; 128 &amp;&amp; current_div.scrollHeight &lt; 200){ current_div.innerHTML +="&lt;a href=\"#\" id='expand_colapse_button"+i+"' class=\"expand_colapse_button\" style=\"color:blue;\" onclick='expand_colapse(\""+ i + "\")'&gt;More...&lt;/a&gt;"; } } } } </code></pre> <p>As you can see I am checking the scrollHeight on the span and on the div because I have a couple of different types of cells that are being generated and I have to place the more button in different places depending on the type of cell. This function only gets called at the end of the function that generates the content being checked and I have tried it with a <code>setTimeout()</code> call on the miniscule chance that it was going through this function before they were fully created (I don't know how that would happen but who knows). </p> <p>P.S. This is all taking place inside of a chrome ext. I don't think that has anything to do with it but who knows. Also the position on the elements is relative as I have seen others post about scrollHeight issues with <code>position: absolute</code>.</p> <p>Edit to make more specific:</p> <p>Hopefully this helps, the cells I am trying to measure are in a containing div that gets its display set to none several different ways. What is happening above happens in one of the instances where I have navigated away (set display to none) from the container and then navigated back to it (set display to block). You can do this in about a dozen ways inside of the chrome ext. but it only says they don't have a scrollHeight (or any height for that matter I tried using <code>getBoundingClientRect()</code> and it returned 0 for everything) for one case which is why I am confused.</p> <p>Also might be useful to know, on navigation back to the container the cells are rebuilt every time and as I stated above my function to get the scrollHeight is called at the end of the function to build the cells. So everytime you get back to the container my function is also called.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRyan
    1. USRyan
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POchecking for scrollHeight of an element sometimes returning 0
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POchecking for scrollHeight of an element sometimes returning 0
      1. USmrtsherman
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload