I'm using jqGrid JS 5.3.0 with styleUI set to Bootstrap. The grid displays fine without bootstrap tabs, but with this html (below copied from getbootstrap.com with mygrid "embedded") the content area is blank with no grid.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table><div id="mygrid_pager"></div></div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
How can I make it work inside a "tab-pane"? TIA. (can't include javascript code of creating "mygrid" right now)
You need to change your code from
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table>
to
<div class="tab-pane fade in" id="home" role="tabpanel" aria-labelledby="home-tab"> <table id="mygrid"></table></div>
adding the in class to your #home will show it on load (judging from <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> you want it to show on load)
and moving <table id="mygrid"></table> into div#home will show your grid inside the tab.