When viewing the embedded report, I noticed that scroll bars for the Table visual are not visible in Google Chrome but are visible in Firefox.
To illustrate:
Report in Power BI Workspace
https://i.sstatic.net/VBmJT.png
Report in Power BI Embedded
https://i.sstatic.net/YBLbU.png
Surprisingly, applying a specific configuration to the report seems to solve this issue, although the reason behind it remains unclear:
settings: {
layoutType: models.LayoutType.Custom,
customLayout: {
pagesLayout: {
'': { visualsLayout: { '': { } } }
}
}
}
I am curious about why this discrepancy occurs and the reasoning behind my workaround. Thank you!
Details of the system:
- Angular version - 11
- powerbi-client-angular version - 2.0.0
- Google Chrome version: 111.0.5563.111 (Official Build) (64-bit)
Edit: Including the full settings and custom CSS applied to the report:
settings = {
type: 'report',
tokenType: models.TokenType.Embed,
embedUrl: embedParameters.embedItem.embedUrl,
accessToken: embedParameters.embedToken.token,
settings: {
layoutType: models.LayoutType.Custom,
panes: {
pageNavigation: {
visible: false
},
filters: {
visible: false
}
},
customLayout: {
pagesLayout: {
'': {
visualsLayout: {
'': { }
}
}
}
}
}
} as IReportEmbedConfiguration;
<powerbi-report
[embedConfig]="getReportConfiguration()"
[eventHandlers]="reportEventHandlers"
cssClassName="report-container">
</powerbi-report>
::ng-deep .report-container {
padding-top: 1rem;
padding-left: 2rem;
padding-right: 2rem;
height: 820px;
width: 1280px;
}