How to set the size of embed report in powerbi-angular

[tobyfan1980]

Hi,

I am following the guide in https://github.com/Microsoft/PowerBI-Angular, to embed my PowerBI report in my Angularjs web app. 

In the html template, I have

<powerbi-report embed-url="report.embedUrl" access-token="report.token" class="powerbi-frame--dotted"></powerbi-report>

In the controller, I get the embedUrl and token from my own backend server.

var app = angular.module('powerBIEmbedTest');
app.controller('PowerBICtrl', [
    '$scope', '$sce', '$window', 'PowerBIService', function ($scope, $sce, $window, PowerBIService) {
        $scope.status = "OK";


        PowerBIService.GetToken().then(function onSuccess(response){

            $scope.report = response.data;
        }
        ......
        ......

I can see the report is successfully loaded, but the size if very small, the height is just 150 px, the width is about 80% of the screen width. I guess this is the default size. But I don't know how to customize the size, and I did not find in the sample code on github. 

Please advise.

Thanks.

[Eric_Zhang · Accepted solution]

@tobyfan1980

Based on my test, you can define the embedded report size by changing the css file.

For example,for this live demo, change height and width in the app.css.

[GIRIBold]

File is not opening ..

[tobyfan1980]

Thanks for the advise. I saw the css file. So, it means I can define my own types in css (e.g., powerbi-frame-xl) specifying its style and use it as 'class' in my <powerbi-report>.  Correct?

I have tried in my project, it works.