We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TreeGrid wrong height if inside a Tab control hidden tab

In TreeGrid there is supposed to be a value generated greater than 0px in

<div class="e-gridcontent" style="height: calc(100% - 0px);">

for example it should be

<div class="e-gridcontent" style="height: calc(100% - 45px);">

The reason for the defective 0px is that if in


in function


it calls function


for that sum of heights it gets zero because the hidden tabs have display:none; .

That makes sense, but the result is bad.

While I have a workaround for now by calculating it later myself, the question here is whether from now on, going forward, it isn't time to replace this height calculation in JavaScript instead with a CSS display:flex; ?

5 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 1, 2022 03:54 PM UTC

Hi UXWiz,

Greetings from Syncfusion Support.

Before proceeding this query, we need some more additional details to achieve your requirement. Share us the following details.

  1. Complete TreeGrid and Tab component details.
  2. By how you have set height for the Treegrid. Share us code details. (whether you need to set height 100% or any others)
  3. Screenshot/Video demo to replicate the issue.
  4. Share us the customized code that you have used.
  5. Have you applied the height for e-gridcontent class by using CSS class or else with TreeGrid height property.

The above provided information will be more helpful to provide you solution as early as possible.


Farveen sulthana T

UT UXWiz Twentyone December 30, 2022 09:31 PM UTC

Please find attached an example app showing the problem.

Attachment: forum179154_2128687a.zip

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 3, 2023 03:06 PM UTC


We are bit unclear of your query. So we need some more additional information about the problem. Share us the following details.

  1. Expected/Output Screenshots demonstrating your issue.
  2. Video demo to replicate the problem.
  3. Screenshots after appling the workaround solution.

UT UXWiz Twentyone February 20, 2023 05:25 AM UTC

The first tab shows correctly:


The second tab incorrectly doesn't show the elements at the bottom:


The reason is described in the first post of this thread.

Because any tab other than the first has display:none the function getSiblingsHeight returns zero, and then things go wrong.

Probably going forward, CSS flex is a better solution than doing that height calculation in JavaScript.

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team March 7, 2023 03:57 AM UTC


We deeply regret for the delayed response.

Query #: The height of the second tab was larger than the first.

To overcome the reported issue, we suggest you render the component only while sliding to the second component. We have achieved through by setting the flag variable in the tab component. Please refer to the following code.

let selection = false;


function tabSelected (args) {

  if (args.selectedIndex === 1){

    selection = true;



<ExampleTabComponent headerPlacement="Top" animation="LeftRight" heightAdjustMode="Fill" :selected= "tabSelected">

        <div class="e-tab-header">


<div class="select-from-hierarchy-space">

                <ExampleSelectFromHierarchyComponent v-if="selection" :hierarchyRecords="exampleHierarchyDataRef2" displayField="name"

                  keyField="abbr" childrenField="areas" v-model="selectedState2"/>



Please refer to the image :

Kindly get back to us for further assistance.


Shek Mohammed Asiq

Live Chat Icon For mobile
Up arrow icon