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.
⋅ 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
⋅ 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>
⋅ 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