Get Free Trial

Pivot does not take 100% height

Nikhil Bhadake asked on October 4, 2018

Hi,
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. 
https://github.com/nikhil-bhadake/Flexmonster.git
 
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

Public
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.
 
Regards,
Ian

Public
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

@Component({
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%"
toolbar="true"
[licenseKey]="'license-key-goes-here'"
[report]="'https://cdn.flexmonster.com/reports/report.json'">
</fm-pivot>
Public
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,
Mykhailo

Please login or Register to Submit Answer