POWER BI EMBEDDED: Embedding independent visuals, getting them to use all the div space

[Hugo_Gallardo]

We had embedded every visual in a asp.net core Razore view.

We had fixed the width and height of the divs but the embedded visual don't use the whole space.

We need to know what to configure in Power BI so they use the whole space and then fix themselves if we are using Bootstrap to fix the div class"col-md" space resposively.

As you can see in the picture the tables aren't using the whole space on the div.

As we are also using the 125% application zoom setting on windows 10, and also since the user is not going to change it, we need to know how to configure visuals to accurate use the space of the display.

responsive and space between divs because of fixed heighttable should use the whole widthtable should use the whole width

[Hugo_Gallardo]

Do you have Power BI Embedded development team we could talk to? We have some issues embedding some visuals extracting them from different PBI reports and we are going nowhere in this forum. That would be helpfull

[v-rzhou-msft]

Hi @Hugo_Gallardo 

As far as I know, currently you can try to change the visual layout by yourself.

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {...}
    }
};

Here is the offical blog. For reference: Personalize a report layout

In addition, here is similar thread about building responsive dashboard view with Power BI Embedded, in which a workaround is mentioned. Could you go to check if it helps in your scenario?

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[Hugo_Gallardo]

Hi:

That would happen if I embedd the whole Power BI report.

I am actually embedding every view separettelly from 3 different reports. That's why this wouldn't work