Webix Treetables on Bootstrap tab component

Webix JS
#1

I’m using bootstrap tab component and I want to have a different webix treetable on each of the 3 tabs I have. The 1st one works fine, but I cannot get the the 2nd one to display on the 2nd tab. Code is below.

If I out the 2nd treetable on the 1st tab, it displays there fine so I know it i snot the treetable code itself. I read this post https://forum.webix.com/discussion/5163/question-on-webix-ui-tab-with-datatable but I can’t relate it to my problem. Something to do with normal HTML code between the 2 treetables???

#2

Sorry - here’s my code …

< div class=“heading tabs”>
< ul class=“nav nav-tabs pull-right” data-tabs=“tabs” id=“tabs”>
< li class=“active”>< a data-toggle=“tab” href="#tab1">< span>Cost Total
< li>< a data-toggle=“tab” href="#tab2">Rollout Edit< /span>< /a>< /li>
< /ul>
< /div>

< div class=“tab-content padded” id=“my-tab-content”>

< div class=“tab-pane active” id=“tab1”>
< div id=“webixtreeGx” style=‘height:90vh; overflow: scroll;’>< /div>
< script type=“text/javascript” charset=“utf-8”>
webix.ready(function(){
gridA = webix.ui({
container:“webixtreeGx”,
view:“treetable”,
id:“cb_total”, …});
});
< /script>
< /div>

< div class=“tab-pane” id=“tab2”>
< div id=“webixtreeGxd” style=‘height:90vh; overflow: scroll;’>< /div>
< script type=“text/javascript” charset=“utf-8”>
webix.ready(function(){
gridB = webix.ui({
container:“webixtreeGxd”,
view:“treetable”,
id:“cb_detail”, …});
});
< /script>
< /div>

< /div>

#3

probably you need to call resize after tab switch
https://snippet.webix.com/21svy945