Making Pivot table 100% height of the div

[Greg Obleshchuk]

Hi All,

Hoping someone can help me .  I'm using the Pivot table from 22.1.34 and I am trying to make it fit 100% height of the div.   I have set my structure of the page to be 100% and I am using flex in column mode to make my content div auto grow.  This works well for text content but when I set the pivot table div to 100% and the option on the pivot table create height to '100%'   the pivot table expands to larger than 100%.  Also, as I scroll down the page the pivot table seems to increase in height.  If I set the height to 700 the pivot table stays at 700px. 

Is there an easy way to make the pivot table 100% of the div size, I would think I'm just missing something as this would be something a lot of people would do.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Greg,

If you set the parent element and pivot table component height as 100%, height is considered as “auto” for the pivot table. Thus, the height increases based on the content. Thus, you need to provide either fixed height to the parent element or to the pivot table, so that if the content exceeds that height the scrollbar appears in the pivot table. In this code example below, we have given “500px” for the parent div and 100% for the pivot table, resulting that the pivot table extends to its parent element height(500px).

Code example:

index.html

<div class="content-wrapper" style="height:500px; ">

        <div id="PivotView">

        </div>

    </div>

 

index.js

var pivotObj = new ej.pivotview.PivotView({

        height: '100%',

  });

Output screenshot:

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/654b88-evfrvz?file=index.js,index.html

Please refer the below UG document to know more about height property.

Document: https://ej2.syncfusion.com/javascript/documentation/pivotview/row-and-column#width-and-height

Regards,

Angelin Faith Sheeba.

[Greg Obleshchuk]

Hi , 

Thanks .  That didn't really work for me .  But it helped and now I have the format almost exactly how I wanted it.  The change I did was to set the body height to 100vh and the div height as well.  

I tried to replicate it for you but this is the best I got 

https://stackblitz.com/edit/654b88-ied3fs?file=index.js,index.html,package.json

What I wanted was the pivot table to scroll not the page.  I didn't want to see the page vscroll at all.  I just wanted the pivot table to take 100% of the height which is left over on the page.

I'm happy wiht what I have now but if you had a better way then that would be great to know.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Greg,

We have checked your sample and we believe that you have more than one child element within a flex div, and both children would fill the entire browser page (i.e., 100vh). However, if you set the pivot table height property to 100%, it will render based on its parent element height. If so, you need to calculate the height to the pivot table’s parent (container) element based on the below code example in order to render the pivot table and its above content with 100vh. Please refer the below code example.

Code example:

index.html

<div style="height:100vh;display:flex;flex-direction:column;">

        <div style="height:100px;background:blue;">

        </div>

        <div class="class1" style="height: calc(100% - 100px);width:100%;background:red;">

            <div id="PivotView" style="width:100%;"> </div>

        </div>

    </div>

 

index.js

var pivotObj = new ej.pivotview.PivotView({

        height: '100%',

  });

Output screenshot:

Meanwhile, we have modified your sample for your reference.

Sample: https://stackblitz.com/edit/654b88-zreu8h?file=index.js,index.html,package.json

Regards,

Angelin Faith Sheeba.

[Greg Obleshchuk]

Awesome, thanks for your help with this

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Greg,

Thanks for the update. Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.