Get Free Trial

Pivot does not take 100% height

Nikhil Bhadake asked on October 4, 2018

I am trying to set height 100% for pivot but it does not seem to work. I have read other threads where you have suggested to set [height]=”‘100%'” however it is not working in my work-space.
I have created a git hub repository to reproduce this problem. Please let me know what am I missing.
I am also trying to render pivot inside kendo splitter expecting it to take height and width of splitter. This code is also present in app.component.html but commented.
I am not able to set height as 100% in both approaches mentioned above.

3 answers

Ian Sadovy Ian Sadovy Flexmonster October 4, 2018

Hello Nikhi,
Thank you for the sample.
Please also add the following CSS to the styles.css file:

html, body {
height: 100%;
margin: 0;

fm-pivot > div {
height: 100%;

Hope it helps.

Dan April 24, 2020

Hopefully this helps out someone else with this issue.  In my Angular 9 application. I had to set the encapsulation of my component to None in order to get the styles stated above to work. The fm-pivot is being used in the analysis.component.html file

encapsulation: ViewEncapsulation.None,
selector: 'app-analysis',
templateUrl: './analysis.component.html',
styleUrls: ['./analysis.component.scss']

In analysis.component.scss, I added:

fm-pivot > div {
height: 100%;

In analysis.component.html, my fm-pivot component looks like this. Make sure whatever container that surrounds your component has a height of 100% or some set height that the pivot table can grow to.

<fm-pivot height="100%"
Mykhailo Halaida Mykhailo Halaida Flexmonster April 27, 2020

Hi Dan,
Thank you for sharing your solution to the above question. We hope it helps other users with a similar problem.
Best regards,

Please login or Register to Submit Answer