Pivot Grid expanding height as parent div for Angular 6

Is there a way to get grid to expand 100% height of containing div. Basically if div is expanded, the grid should expand as well. In this JS example http://jsfiddle.net/flexmonster/g6kz2ctq/6/  it works as expected, but I cannot get it to work in the angular 6 implementation. I cannot specify the height below in %. Width is expanding correctly but not height…
 
<fm-pivot #pivot [componentFolder]=”‘https://cdn.flexmonster.com/'”
[toolbar]=”true”
[height]=”100%”   //this does not work
[licenseKey]=”‘XXXXX'”
[report]=”report”
(ready)=”onPivotReady($event)”
(reportcomplete)=”onReportComplete($event)”
(reportchange)=”onReportChanged($event)”
[customizeCell]=”onCustomizeCell”
(beforetoolbarcreated)=”customizeToolbar($event)”>
</fm-pivot>
 
 

3 answers

Public
Tanya Gryshko Flexmonster September 25, 2018

Hello, Kunal,
Thank you for writing to us.
We would like to point out that string values need to be surrounded by singular quotes within the double quotes. So please replace

[height]="100%"

with

[height]="'100%'"

Please let me know if it helps.
Regards,
Tanya

Public
Kunal Gupta September 26, 2018

Still does not work. Please see attached screenshot of browser. The pivot grid is inside a widget which a user can expand. Width will adjust but not height, The default height is also 200px on first load
 
<fm-pivot #pivot [componentFolder]=”‘https://cdn.flexmonster.com/'”
[toolbar]=”true”
[height]=”‘100%'”
[licenseKey]=”‘Z7UE-XD591L-482W5W-2X5W42′”
[report]=”‘https://cdn.flexmonster.com/reports/report.json'”
(ready)=”onPivotReady($event)”
(reportcomplete)=”onReportComplete($event)”
(reportchange)=”onReportChanged($event)”
[customizeCell]=”onCustomizeCell”
(beforetoolbarcreated)=”customizeToolbar($event)”>
</fm-pivot>
 

Public
Dmytro Zvazhii Flexmonster September 26, 2018

Hello Kunal,
Thank you for writing. CSS standards declare some specific conditions to make "height: 100%" work as expected.
As for the jsfiddle example which was mentioned above, Flexmonster’s div is placed inside an iframe with the certain pre-set height. Therefore, please check the HTML structure you are using.
Also, you can refer to the following article: https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window to find a suitable solution for you.
Please let us know if everything works fine for you.
Regards,
Dmytro

Please login or Register to Submit Answer