I have a dashboard type page on the left i have tabs & right i have content of the respective tab. I am using bootstrap so i made 2 columns 1 for tab & other for it's contents but my problem is that the border of tabs is not covering the entire height of the content i want it to cover the full height so i have written a jquery that will set the height of the last tab ("#ws") but that work only on page load not on button click.
TLDR
1) Go to http://kwebmakerusa.com/whp/v3/dashboard.html
2) Can you see the border-right of the tab it's height is same as the content on the right
3) click any other tab eg:address book. Notice the height shrinks
What i am trying to do is keep the height same as the content on the right
here is my html :
<div class="col-md-2 col-sm-3 hidden-xs nopadding">
<div id="dtnavs">
<div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
<div class="col-md-12 tabtxt" id="cartt">My Cart</div>
<div class="col-md-12 tabtxt" id="addresst">Address Book</div>
<div class="col-md-12 tabtxt" id="ordert">My Orders</div>
<div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
<div class="col-md-12 tabtxt" id="newst">Newsletters</div>
</div>
<div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamicaly-->
</div>
On click
$("#addresst,#mtab3").click(function() {
$('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
$('#addtab').slideDown(500);
$(".dashnav").find(".active").removeClass("active");
$(this).addClass("active");
setwsheight("#addtab");
$(".ccatname,#bcactive").text("Address Book");
console.log(this);
return false;
});
setwsheight();
function setwsheight(sh){
$('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
console.log(str);
console.log(sh+" height : "+$(sh).height());
console.log("dtnavs height : "+$('#dtnavs').height());
console.log("WS height :" +$('#ws').height());
};
without jquery
I have change some Your HTML Code Like
Remove this class in content tab left40
Apply this css your content side parent content like col-md-10 col-sm-9 col-xs-12 nopadding
.selector {
border-left: 1px solid #ccc;
margin-left: -1px;
padding: 0 0 0 40px;
}
apply this css tab content col-md-2 col-sm-3 hidden-xs nopadding
.selector{
background: #fff none repeat scroll 0 0;
position: relative;
z-index: 999999;
}
Try this.
var newHeight=your calculation;
$('#ws').animate({
height:newHeight+"your unit"
},yourDelay,function(){});
Also if that still doesn't work, try making the #ws
element's position property absolute in a CSS file, along with the code posted in this answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.