panel.scrollHeight < actual height panel

Question

I've got a combination of css and javascript that allows users to expand a particular div from 0 to its initial height when the user clicks on the header of that div.

HTML

 <button class="accordion accordion1">

    <div class="innerbutton">
        <div class="heading">Click to expand me!</div>
    </div>

</button>

<div class="panel panelmargin">

    Some content that will appear when button is clicked

</div>

CSS

button.accordion.active:after {
content: "\2212";
}

div.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

Javascript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

I've got a few panels that have content that is about 4000px in height. Upon initial click of the button, scrollHeight is only being set to approx 2400px. When clicking the button several times, the scrollHeight will be correctly set to 4000px and I can see all of my content.

Do you know why the scrollHeight is being set to an incorrect value?

Here is the codepen. I don't have the content that extends to 4000px, but this might give you a better idea of how it functions.

https://codepen.io/anon/pen/QBONoO

Thanks!

I'm unable to recreate your situation https://codepen.io/anon/pen/WKXwqX?editors=1111 . There may be content in your panels that are affecting the scrollHeight property. Do you have mixed content in the panels? ie.
? — LegenJerry, Jul 28 '18 at 10:08
You need to provide a code sample that reproduce the issue described. — Asons, Jul 28 '18 at 10:18
Maybe you mistyped but in your question you are not setting scrollHeight, you are assigning the value of scrollHeight to panel.style.maxHeight — LegenJerry, Jul 28 '18 at 10:19
Yes, it looks like I did make a typo. Correct, I'm assigning the value of scrollHeight to panel.style.maxHeight. When I click the button initially, scrollHeight is resolved at say 2400px. When I click the button again, the panel closes and maxheight goes to 0. When I click the button again, the panel opens at the correct max-height of 4000 and I can see all of the content. — Jason Howard, Jul 28 '18 at 10:22
If you can possibly reproduce that in codepen I may be able to help. I tried adding text to about 4000px in height but I could not reproduce your situation — LegenJerry, Jul 28 '18 at 10:25
Thanks. I'm starting to suspect that it may be the images...I'll experiment over here and then let you know what I find. — Jason Howard, Jul 28 '18 at 10:27
Well, if you have images in there, and run the above code on DOM load, it won't work as many images is not yet loaded. Use `onload` if to take images into account. — Asons, Jul 28 '18 at 12:47
You are a genius! This is likely it! The images aren't being loaded by the time scrollHeight is calculated. Do you know what syntax I'd use to prevent this? — Jason Howard, Jul 28 '18 at 20:30

score 0 · Answer 1 · answered Jul 28 '18 at 20:59

As per LGSon, I wrapped my js function in

$(window).on("load", function() {

});

This ensure that scrollHeight is only calculated after all images are loaded.

I then put a loading gif on the page while the images load so that the user doesn't try to open the dropdown while the images are still loading. Clicking on the button while the images are still loading does nothing. This loading icon will prevent frustration on the part of the user.

How to show Page Loading div until the page has finished loading

panel.scrollHeight < actual height panel

1 Answers1