Height does not adjust for responsive content within tab #142
Description
The autoHeight animation sets the .tab-content element to a fixed height. This causes content to be cut off when the browser is resized to be narrower.
The .tab-content element should have its height set to "auto" in order to accommodate the height of the content changing as the browser is resized. Before starting the tab switching animation, the height of .tab-content can be changed to a fixed size for the duration of the animation, then changed back to "auto" when the animation is done.
- At the top of each transition, set the container to a fixed height:
this.container.height(this.container.height());
- Change _fixHeight to set the container height to auto:
function _fixHeight(idx) {
// Auto adjust height of the container
if (this.options.autoAdjustHeight) {
var container = this.container;
var selPage = this._getStepPage(idx);
container.finish().animate({
height: selPage.outerHeight()
}, this.options.transition.speed, undefined, function(){
container.height('auto');
});
}