Nick Zulanas Nick Zulanas - 29 days ago 4
HTML Question

Why is the last tab- pane always active even after selecting other tabs?

I am working with bootstrap on this large view containing sub views. I have a ton of tabs on the larger view but only one set of them malfunctions consistently. I have checked the syntax against that of the other working tab pills sections but the last tab section is always present.

<div class="row" style="height:350px">
<div class="col-lg-3">
<h3>Users</h3>
<ul class="nav nav-pills nav-stacked">

<li id="Cre" class ="active"><a data-toggle="pill" href="#CreUser" onchange="HideIt(1)"> Create User</a></li>
<li id="Mod"><a data-toggle="pill" href="#ModUser" onchange="HideIt(2)"> Modify User</a></li>
<li id="Del"><a data-toggle="pill" href="#DelUser" onchange="HideIt(3)"> Delete User</a></li>
</ul>


</div>
<div class="container col-lg-8 col-lg-offset-1" style="height:95%;border-radius:70px;border-color:darkblue; border:1px solid">
<div class="tab-content col-lg-offset-1">
<div id="CreUser" class="tab-pane active">
@Html.Action("CreateUser", "Home")
</div>
<div id="ModUser" class="tab-pane">
@Html.Action("ModifyUser", "Home")
</div>
// NO MATTER WHAT THIS TAB ALWAYS APPEARS IN THE PANE OR IS PUSHED DOWN OUT OF THE WINDOW PANE BY THE OTHER TAB SECTIONS
<div id="DelUser" class="tab-pane">
@Html.Action("DeleteUser", "Home")
</div>


</div>
</div>
</div>


Example Screenshot of Tab Malfuction

Any help would be greatly appreciated

Answer

I missed an extra div element that was within my Modify user action view. which was causing my tab-pane to exit early which cause the next tab-pane to always be active.

Comments