I have created some reports in Power BI with an iframe height of 80rem, which is fine. However, I am encountering an issue where if the report's height is lower, it leaves a blank space that I would like to eliminate.
https://i.sstatic.net/mabKQ.png
I have experimented with CSS, but adjusting the iframe height causes other reports to be cut off. Removing the height setting results in the report displaying at a fixed size of 300w x 150h. I have also attempted to utilize pages layout, display options, and visual layouts without success. The guide I am following is available here: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Custom-Layout
After reading about pages layout, I believe this issue can be resolved using that method, but I am unsure how to implement it. Do you have a solution for this? Thank you in advance.
The configuration for Power BI is as follows:
this.config = {
accessToken: accessToken && accessToken.currentValue ? accessToken.currentValue : this.config.accessToken,
tokenType: tokenType && tokenType.currentValue ? this.getTokenType(tokenType.currentValue) : this.config.tokenType,
embedUrl: embedUrl && embedUrl.currentValue ? embedUrl.currentValue : this.config.embedUrl,
type: type && type.currentValue ? type.currentValue : this.config.type,
id: id && id.currentValue ? id.currentValue : this.config.id,
filters: filtersExternal && filtersExternal.currentValue ? filtersExternal.currentValue : this.config.filters,
...this.fixedConfig
};
And Fixed config:
// Fixed configuration
fixedConfig: IEmbedConfiguration = {
settings: {
navContentPaneEnabled: false,
filterPaneEnabled: false,
customLayout: {
pageSize: {
type: models.PageSizeType.Custom,
height: 600,
width: 1300
}
}
}
};