Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
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