Apologies for the confusing title - finding it difficult to summarize in just one line!
I have dynamic content loading into divs and a smooth resizing function that animates the height of these divs to auto.
function adjustHeight(div) {
var $selector = $('#' + div);
$selector.data('originalHeight',$selector.height()).css('height','auto').data('newHeight',$selector.height()).height($selector.data('originalHeight')).animate({height: $selector.data('newHeight')},400);
}
Everything works smoothly in one orientation or viewport size, but when switching to landscape or resizing the browser window on desktop, the divs don't adjust their height correctly causing overflowing content or unnecessary empty space within the div.
Disabling the function makes the divs adjust automatically to fit the content, though losing the appealing animation effect.
Questioning if the issue lies in not setting the height back to auto after the animation, or possibly needing to set the height to zero post animation completion?