I have created a modal and a nav-tab in that modal .There are 2 issues.
First is that those tabs are very large in height ,I want to set their height a bit less in size .I have tried to set their height using css height property,but its not working for me.
My second issue is that, when particular tab is opened then the border-bottom/ line showing at bottom of that tab is not getting hidden,as it should do normally.I want to hide that bottom line of the tab when it is open .
So, please can anyone help me to solve the above issues.
Here is the image of my modal with the tabs:
here is my code for these tabs (i am avoiding unnecessary code):
<div class="tabbable" >
<ul class="nav nav-tabs" ><!--tabs-->
<li style="position:absolute;margin-left:0px;height:50px;" id="logintab">
<a href="#pane_login" data-toggle="tab" id="logintab_a">Login</a></li>
<li class="active" style="margin-left:70px;" id="reg_tab" >
<a href="#pane_reg" data-toggle="tab" id="regtab_a">Registration</a></li>
</ul>
<div class="tab-content"><!--login tab content-->
<div id="pane_login" class="tab-pane active">
</div>
</div>
<div class="tab-content"><!--login tab content-->
<div id="pane_register" class="tab-pane active">
</div>
</div>
</div><!--/Tabbable-->
Sharing my solution just in case someone else has to adjust the height:
.nav-tabs > li > a
{
/* adjust padding for height*/
padding-top: 4px;
padding-bottom: 4px;
}
The second issue could be resolved by adjusting margin of active anchor
.nav-tabs > li.active > a:focus, .nav-tabs > li.active > a
{
margin-top: 1px;
}
.nav-tabs > li {
margin-bottom: 0px;
}
.nav-tabs > li.active {
margin-bottom: -1px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With