Css make tabs vertical if has been overflowed - html

Question

I have horizontal tabs 1 as,
How can I make tabs vertical on window resize than it has been overflowed?
like this:
I don't want usign #media because tabs are dinamic and may be only 1-2 tabs and it will display good in horizontal view

Answer 1

Use JS/jQuery to calculate total width of tabs and check if it's grater than container width.
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
$('.tabs-container')
.toggleClass('v-tabs', totalWidth >= availableWidth)
.toggleClass('h-tabs', totalWidth < availableWidth);

Answer 2

You could use Jquery to add a new class on a window resize
$( window ).resize(function() {
$("tabs").addClass("nice looking class");
    }
other than this i would use a responsive grid.

Answer 3

Basically join Justinas and Troajans answers together:
function checkTabWidths(){
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs-container').removeClass('v-tabs h-tabs');
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
if (totalWidth >= availableWidth) {
$('.tabs-container').addClass('v-tabs');
} else {
$('.tabs-container').addClass('h-tabs');
}
}
$( window ).resize(function() {
checkTabWidths(); // Check widths on resize
}
checkTabWidths(); // To check on load

Answer 4

You can use jquery to do that:
//first get the container width
var container=$("#containID").width();
//then get the total width of each tabs
var totalWidthOfTabs=0;
$("#containID .tabs").each(function(){
totalWidthOfTabs+=$(this).width();
});
//when window resize, do something
$( window ).resize( function(){
if(totalWidthOfTabs>container){
$("#containID .tabs").css("width","100%");
}
});
just an idea to do what you want. I do not check it whether it is correct or not, you can change it if the example is wrong~