asked on September 24, 2018
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>
⋅ 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
⋅ 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>
⋅ 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
