Issue when persisting kendo-tabstrip tabs using keepTabContent=true (2 tabs rendered at the...

I have the following section in a simple page that displays 2 tab, each tab has a component that executes some calls to the backend and renders a a grid, some dropdowns fields, and some more fields.

I wanted to use the [keepTabContent]="true" property so that each time I switch out of a tab and then come again to the tab, it doesnt have to perform the same calls to the backend because the information was already retrieved.

When I tested with [keepTabContent]="true" the problem was that each tab is being rendered at the same time, one below the other one. The tabs buttons are still there and when I click on them to switch on and off the tabs, I see that the content is being persisted so its close to doing what I want it to do, but I dont know why Im having the problem of seeing both tabs rendered at the same time. Here's the code I have:

<section class="content">

<app-detail-header
[profileId]="profileId()">
</app-detail-header>

<div class="card k-p-2 flex-grow">
<div class="wrapper">
<kendo-tabstrip (tabSelect)="onTabSelect($event)" class="flex-tabstrip" [keepTabContent]="true">

<kendo-tabstrip-tab title="1st tab" [selected]="true">
<ng-template kendoTabContent>
<app-detail-1st-tab [id]="profileId()"></pp-detail-1st-tab>
</ng-template>
</kendo-tabstrip-tab>

<kendo-tabstrip-tab title="2nd tab">
<ng-template kendoTabContent>
<app-detail-2nd-tab [id]="profileId()"></app-detail-2nd-tab>
</ng-template>
</kendo-tabstrip-tab>

</kendo-tabstrip>
</div>
</div>
</section>


Is there any way to easily achieve what I want?

Also, while searching for this, I found the following example: https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/rendering-modes which does what I need to do, but the difference is that each tab is not being rendered at the same time. May I have some css style or something like that that is making the tabs being rendered at the same time?

Continue reading...