The issue I'm encountering with detecting the height of absolutely positioned content is demonstrated in this JSFiddle.
I am working on creating a tabbed panel where users can select a room type and then a sub-type. The sub-types (ul.sub-types) are set to position absolute for proper alignment.
When switching between room sub-types, I need to determine the height of ul.sub-types using jQuery/javascript to adjust the height of the entire panel (div.tab-panel outlined in blue) to match its contents. This adjustment ensures that the page content below the panel is not obscured by the absolutely positioned room subtypes.
Unfortunately, the jQuery function appears to run twice - initially detecting the correct value and adjusting the tab-panel correctly, but then running again and returning an incorrect value.
This behavior is most evident when selecting "Family" on the left and then "Family Double" at the bottom right, as it contains multiple list items to emphasize the height change.
Any insights into what might be causing this issue or suggestions on how to resolve it would be greatly appreciated.
HTML:
<section id="main_col">
<div class="tab-panel">
<ul id="room-types" class="left-tabs">
...
</ul>
</div>
CSS:
/*--- booking tab panels --- */
.tab-panel {
...
}
.tab-panel ul.sub-types {
...
}
...
jQuery:
$(document).ready(function() {
$('.sub-types li').click(function() {
// Handle click logic here
});
}); /* end $(document).ready(function() */