Search code examples
iframeblazor

I'm not able to control the height of an iframe

In my Blazor application I'm trying to display swagger within the application instead of navigating to swagger. Here's the code I'm trying to use.

@page "/admin/swagger"
@*@attribute [Authorize(Roles = "Admin")]*@
@*@attribute [Authorize]*@

<iframe src="swagger" height="400px"></iframe>

It's rendering like this...

enter image description here

How do I get it to have a static height or at least fill the page?

Thanks!

Solution

  • You can use CSS isolation on your page to do the sizing.

    AdminSwagger.razor

    @page "/admin/swagger"

<iframe src="swagger"></iframe>

    AdminSwagger.razor.css - file within the same folder that contains your component AdminSwagger.razor

    iframe {
    height: 100vh;
    width: 100vw;
}

    You will need to adjust the CSS to fit your application's UI.