I am having issues with setting the height of an iframe that displays a PowerBI dashboard.
My specific requirements are:
- The content within the iframe should be contained within a div that has a height of 40% and sets all its contents to a height of 100%.
Below is a screenshot illustrating what I am trying to achieve:
I have attempted to adjust the height of the parent elements without success. Any assistance would be greatly appreciated.
async showDashboard(rpConfig: IDashboardEmbedConfiguration) {
let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
let dashboardContainer = <HTMLElement>document.getElementById('dashboardContainer');
powerbi.reset(dashboardContainer)
console.log(rpConfig)
let dashboard = powerbi.embed(dashboardContainer, rpConfig)
console.log(dashboard)
// this.dashboardConfig = {}
this.loadedDashboard = true;
}
}.row2{
height: 40%;
.tabContainer{
height: 100%;
background-color: #fff;
.powerBiBlock{
height: 100%;
.dashboardContainer{
height: 100%;
.iframe{
height: 50%;
//overflow-y: hidden;
}
}
}
}
}<div class="row2" id="ButtonEl">
<div class="tabContainer">
<div class="margin50">
<div class="top-tab btn btn-primary" (click)="toggle()">
<p><i class="arrow down"></i></p>
</div>
</div>
<div class="powerBiBlock">
<div id="dashboardContainer" class="dashboardContainer">
<div id="dashboardContainer" class="dashboardContainer"></div>
</div>
</div>
</div>
</div>