Comments (14)
@enylton
Setting the cssClassName
attribute is absolutely required. Please see this image:
The term report-container is no where to be found in the rendered elements.
However once I set it in the template:
<powerbi-report [embedConfig]="reportConfig" [cssClassName]="'report-container'"></powerbi-report>
Everything works as described above.
@KotanaSai21, @mratanusarkar, thanks for the input.
from powerbi-client-angular.
@mratanusarkar I had the same issue as you. In your Angular app under the root directory, there is a styles.css that is where you need to put the .report-container styling class.
from powerbi-client-angular.
@jameseisapp thanks! the css seems to be working when applied from
root/styles
stylesheet file..report-container { height: 630px !important; }but again, with
height: 100%
it doesn't work, and it's back to the same issue with small fixed height ~150px. Is there any way, so that the powerbi report-container will take up the full available height (space between header & footer, without overflow), and without hardcoding the height in px?For reference, here is the sample poc codebase that I am working on: https://github.com/mratanusarkar/Angular-PowerBI-POC
Trying this myself. Come on guys, this is absolutely pathetic engineering work that you can't get something as simple as height correct and configurable. It is fixed to 150px by default, only way to oveerride is with the !important tag which most decent engineers know is a bad approach
Get it together, please!
from powerbi-client-angular.
IMHO, report-container
is already passed to <powerbi-report>
File demo/src/app/app.component.ts, line 38, defines reportClass = 'report-container';
This demo code defines report-container
in 2 .css files:
- demo/src/app/app.component.css lines 94-98
- demo/src/styles.css lines 24-28
As mentioned by @jameseisapp , the definition in demo/src/styles.css is the one applied. As per Angular documentation https://angular.io/guide/component-styles:
Reminder: the styles in the style file apply only to this component. They are not inherited by any components nested within the template nor by any content projected into the component.
The component <powerbi-report>
is nested and not able to access the style in app.component.css, thus the need for the definition in the global style file.
Another route, as @ginobili suggested, would be to set ViewEncapsulation.None
https://angular.io/guide/view-encapsulation
Is this correct, @KotanaSai21 ?
from powerbi-client-angular.
guys, I checked out my old project and I am sharing the workaround I found back then,
which I used to make my PBI report occupy the full height.
I have updated those changes to the dummy POC project, check it out if it helps.
Full POC Project: Angular-PowerBI-POC
PR with changes: temp fix to full height issue
Summary in short:
I had tried a lot of CSS overriding and played around with the report-div
.
In the end, the following changes gave me a workaround:
- using the height of different div elements in
vh
instead ofpx
- using
displayOption
in the ts file, forreportConfig: IReportEmbedConfiguration
as:
customLayout: {
displayOption: models.DisplayOption.FitToPage
}
- overriding report-container in
styles.scss
with the following:
report-container {
height: 81vh;
margin: 8px auto;
width: 100%;
}
Modify according to your need, and see if this helps in any way or fixes the issue in your projects.
from powerbi-client-angular.
@mratanusarkar have you tried to disable viewencapsulation in your component? Somehow the styles aren't applied
from powerbi-client-angular.
@ginobili where do I get viewencapsulation
?
could you please guide me where to find the same or share some code-snippets?
from powerbi-client-angular.
@jameseisapp thanks! the css seems to be working when applied from root/styles
stylesheet file.
.report-container {
height: 630px !important;
}
but again, with height: 100%
it doesn't work, and it's back to the same issue with small fixed height ~150px.
Is there any way, so that the powerbi report-container will take up the full available height (space between header & footer, without overflow), and without hardcoding the height in px?
For reference, here is the sample poc codebase that I am working on: https://github.com/mratanusarkar/Angular-PowerBI-POC
from powerbi-client-angular.
@mratanusarkar yes, try viewport height, see what I'm using below for my application.
.report-container {
height: 75vh;
margin: 8px auto;
width: 90%;
}
from powerbi-client-angular.
@patrickoneill46 I have been playing with the styles as suggested by @jameseisapp,
trying different css units like %, px, vh, em, rem, etc and also display-flex, col-md, etc.
but again, it's not like the perfect "one stop" solution!
It's like a temporary fix, that works differently with different cases.
for example, I have a project where there are sidebar, header, footer and tiles, where various components have different css units due to legacy codebase.... and the .report-container
css override simply doesn't work there, as the components keep changing dimensions according to various situations. There should be something dynamic instead of hard-coding the height.
My point is, if the width works perfectly with customLayout: { displayOption: models.DisplayOption.FitToWidth }
, why isn't there something out of the box for height too, that will auto modify the height according to the parent div/component's height???
from powerbi-client-angular.
I am facing this same issue. In fact, there aren't even any elements in the html that have the report-container
class.
The iframe that the report is rendered in has style="width: 100%; height: 100%;"
But as everyone knows setting height to 100% on an iframe isn't enough.
from powerbi-client-angular.
@cosmoKenney
Default height of iframe is 150px. Specifying style="width: 100%; height: 100%;"
for iframe, makes the iframe to take default height of 150px.
We need to provide height to parent div specifically, where our iframe is embedded and it will take the default height of div container.
report-container
is class name passed as input, and we use this report-container class name to set stylings for div where iframe is embedded in the package
from powerbi-client-angular.
@KotanaSai21 are you saying to use the [cssClassName] attribute input on the component?
Like: <powerbi-report [cssClassName]='report-container'></powerbi-report>
?
from powerbi-client-angular.
@enylton , Yes, You're indeed correct. Thanks for pointing this out. We will be removing styling for container in app.component.css
.
@cosmoKenney , Yes, Correct. Please note that to Apply styling to report-container
in styles.css file. Feel free to reach out if you're facing any other queries.
from powerbi-client-angular.
Related Issues (20)
- reportObj always returns `undefined` HOT 1
- Support for Scorecards HOT 2
- Visual constructor and Visual update console.logs unwanted HOT 3
- Clear Selection Programmatically HOT 1
- Cant import the named export 'Component' HOT 1
- Table scroll bars are not visible in Google Chrome HOT 2
- Gov Cloud Reports are not rendering in Angular Component due to CROS issue HOT 7
- Make it possible to set the active page from outside the powerbi-client HOT 1
- Can't work with a low version of angular HOT 1
- TypeError: Cannot read properties of null (reading 'postMessage') HOT 3
- Missing fonts and styles in power bi embedded reports HOT 2
- Doesn't work with Angular 15 HOT 4
- Does powerbi-cilent-angular library supports server side rendering? HOT 2
- Support for reseting a report HOT 6
- FrontLoadException conceptualSchema Exception: Unexpected end of JSON input
- Event Handlers not working for paginated reports. HOT 1
- Embeding PowerBI Desktop Report HOT 1
- Angular 16 Support HOT 5
- Can someone please explain how the token is delivered? HOT 8
- Optimization Npm Builed Failed when adding powerbi-client-angular in our Angular 16 app HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.