0

I've seen this question and have not seen anyone provide this answer. The solution I created was perfect for my situation so I thought I'd share. Essentially, I had a page where a generated list was hidden at first by setting CSS height to "0" then expanded on click by transitioning height. However, transitions won't work with height = "auto". So I did some digging and realized that the CSS attribute "scrollHeight" will still calculate despite "height" or "max-height". So I set the "onclick" event to change the element height to the "scrollHeight".

document.getElementById('dropContent').style.height = document.getElementById('dropContent').scrollHeight + 'px';
EnemySoft
  • 11
  • 2

1 Answers1

0

From the book CSS in Depth:

A value cannot transition from a length 0 to auto.

What you can do is set a height explicitly instead, the problem is that maybe you don't know what the height should be. That's only known once the contents are set and rendered in the browser, so you'll have to use JavaScript to determine the height. Unfortunately, there's no other workaround.

So you should keep using element.scrollHeight.

Bryan Fonseca
  • 1
  • 1