$('#toggleSidebar').on('click',function(){
$('body').toggleClass('sidebar-collapse');
});
$('#fixedTabHeader').on('click',function(){
$('.mt-tab-wrapper').toggleClass('fixed');
});.wrapper{
border:1px black solid;
}
.main-header{
background-color: #3c8dbc;
min-height : 50px;
z-index: 1000;
position: fixed;
width: 100%;
}
.main-sidebar{
background-color: #222d32;
z-index: 810;
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
}
.sidebar-collapse .main-sidebar{
width: 0;
}
.content-wrapper{
border:1px black solid;
height: 100%;
z-index: 820;
padding-top: 50px;
margin-left: 230px;
}
.sidebar-collapse .content-wrapper{
margin-left: 0;
}
.mt-tab-wrapper{
position: relative;
}
.mt-tab-header {
background-color : #fff;
line-height : 0;
display: inline-block;
width : 100%;
z-index: 1000;
}
.fixed .mt-tab-header{
position: fixed;
top: 50px;
display:inline-block;
}
.fixed .tab-content{
padding-top : 42px;
}
.mt-tab-panel{
margin-right: -1px;
overflow: hidden;
display: inline-block;
float: left;
width: calc(100% - 185px);
}
.mt-tab-panel ul{
width: 10000px;
}
.mt-tab-tools-left{
display: inline-block;
float : left;
}
.mt-tab-tools-right{
display: inline-block;
float: right;
}
.mt-tab-tools-right ul{
padding-left: 5px;
}
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<button id="toggleSidebar">toggle sidebar</button>
<button id="fixedTabHeader">fixed tab header</button>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<div class="mt-tab-wrapper" >
<div class="mt-tab-header " >
<div class="mt-tab-tools-left">
<ul class="nav nav-tabs">
<li class="mt-move-left"><a><i class="fa fa-backward"></i></a></li>
</ul>
</div>
<nav class="mt-tab-panel" >
<ul class="nav nav-tabs">
<li class="active"><a href="#test_tab_1"> Tab 1 </a></li>
<li><a href="#test_tab_2"> Tab 2 </a></li>
<li><a href="#test_tab_3"> Tab 3 </a></li>
<li><a href="#test_tab_4"> Tab 4 </a></li>
<li><a href="#test_tab_5"> Tab 5 </a></li>
<li><a href="#test_tab_6"> Tab 6 </a></li>
<li><a href="#test_tab_7"> Tab 7 </a></li>
<li><a href="#test_tab_8"> Tab 8 </a></li>
<li><a href="#test_tab_9"> Tab 9 </a></li>
<li><a href="#test_tab_10"> Tab 10 </a></li>
<li><a href="#test_tab_11"> Tab 11 </a></li>
<li><a href="#test_tab_12"> Tab 12 </a></li>
<li><a href="#test_tab_13"> Tab 13 </a></li>
<li><a href="#test_tab_14"> Tab 14 </a></li>
<li><a href="#test_tab_15"> Tab 15 </a></li>
<li><a href="#test_tab_16"> Tab 16 </a></li>
<li><a href="#test_tab_17"> Tab 17 </a></li>
<li><a href="#test_tab_18"> Tab 18 </a></li>
<li><a href="#test_tab_19"> Tab 19 </a></li>
<li><a href="#test_tab_20"> Tab 20 </a></li>
<li><a href="#test_tab_21"> Tab 21 </a></li>
<li><a href="#test_tab_22"> Tab 22 </a></li>
<li><a href="#test_tab_23"> Tab 23 </a></li>
<li><a href="#test_tab_24"> Tab 24 </a></li>
<li><a href="#test_tab_25"> Tab 25 </a></li>
</ul>
</nav>
<div class="mt-tab-tools-right">
<ul class="nav nav-tabs">
<li class="mt-move-right"><a><i class="fa fa-forward"></i></a></li>
<li class="mt-dropdown-option dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Option<span class="caret"></span></a>
<ul role="menu" class="dropdown-menu dropdown-menu-right">
<li class="mt-show-actived-tab"><a>Show Activated Tab</a></li>
<li class="divider"></li>
<li class="mt-close-all-tabs"><a>Close All Tabs</a></li>
<li class="mt-close-other-tabs"><a>Close Other Tabs</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-content" >
<div class="tab-pane active" id="test_tab_1">
<h1>Demo page</h1><h2>This is a demo page :) </h2>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
This is the content! <br/>
</div>
</div>
</div>
</div>
<!-- /.content-wrapper -->
</div>I have make a sample in jsfiddle
I make a Nav tabs for my project, it's a multi tabs page. When I fixed the nav header, and open/close sidebar, the nav header isn't auto width, it will be pushed out to the right.
How can I set it auto width with css?
Finally I found a acceptable solution, see in jsfiddle
I fixed the mt-tab-tools-right, and put it right : 0;. It's not the perfect solution, but acceptable. If anyone have something better, please let me know.
.fixed .mt-tab-tools-right{
position: fixed;
right: 0;
background-color : #fff;
}