How to have tabs of matching height with bootstrap?

Question

I'm using Bootstrap tabs to display some content. Each of my tabs is almost the same height, but not exactly so when you switch tabs, there is a slight movement of the next component.

Is it possible to make each tab panel the height of the maximum height ?

Here is an example: https://jsfiddle.net/ommnft3e/ I'd like the <hr> to not move when I switch tabs. Is that possible ?

Thanks

Answer 1

Override the bootstrap css and Use visibility hidden

.tab-content>.tab-pane{
    display:block;
    visibility:hidden;
}

.tab-content>.active{
    visibility:visible;
}

see the fiddle https://jsfiddle.net/devjit/ommnft3e/5/

In that case I think you will have to use javascript to determine the max height. check this fiddle .. https://jsfiddle.net/devjit/ommnft3e/8/

Answer 2

I wrote this little script that manages the tab pane heights and adjust it to make them all the same height.

function tabHeightManager() {

this.margin = 0;
this.selcheck = '';
this.selmod = '';
this.running = false;

}

tabHeightManager.prototype.bind = function( _selcheck, _selmod, _margin ) {

if (typeof(_selcheck) === 'undefined')
    return false;
else
    this.selcheck = _selcheck;

if (typeof(_selmod) === 'undefined')
    return false;
else
    this.selmod = _selmod;

(typeof(_margin) === 'undefined') ? this.margin = 0 : this.margin = _margin;

var self = this;
$(window).on('resize', function() {
    setTimeout( function() { self.recalc() }, 200 );
})

self.recalc();
}

tabHeightManager.prototype.recalc = function() {
if(this.running)
    return false;

this.running = true;

var max = 0;
$(this.selcheck).each(function () {
    if (max < $(this).outerHeight(true))
        max = $(this).outerHeight(true);
});

max += this.margin;
$(this.selmod).css({'height': max});

this.running = false;
}

Just create the bootstrap tabs and after that call

    var tabMan = new tabHeightManager();
    tabMan.bind('.tab-pane','.tab-content',15);

It's quite crap but I arranged it in a hurry, hope it helps.