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
@syncfusion/ej2-grids/src/grid/actions/scroll.js
in function
Scroll.prototype.refresh
it calls function
getSiblingsHeight
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; ?
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.
The above provided information will be more helpful to provide you solution as early as possible.
Regards,
Farveen sulthana T
UXWiz,
We are bit unclear of your query. So we need some more additional information about the problem. Share us the following details.
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.
UXWiz,
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"/> </div>
|
Please refer to the image :
Kindly get back to us for further assistance.
Regards,
Shek Mohammed Asiq