How do I make an iframe show at 100%?

Question

I am trying to follow along with this post to show a PDF in a WebView2. I have set my WebView2 to dockstill "Fill", so it will use the entire space of the form.

The author recommends:

Dim html As String = "<!DOCTYPE html><html><head></head><body><div>" &
        $"<iframe width=100% height=500 src=""data:Application/pdf;base64,{pdfBase64}"">" &
        "</iframe></div></body></html>"

Me.WebView2.NavigateToString(html)

This works.

The PDF is displayed over the width of the webview / form and with 500 pixels in height.

However, I would like the iframe to be the size of the parent. To do that, I change "500" to "100%" like this:

Dim html As String = "<!DOCTYPE html><html><head></head><body><div>" &
        $"<iframe width=100% height=100% src=""data:Application/pdf;base64,{pdfBase64}"">" &
        "</iframe></div></body></html>"

This has no effect. Instead, the pdf that is shown in the iframe gets a height of 152 pixels.

What am I doing wrong?

@KJ Wow, why is that so, and how could I achieve what I need to do? — tmighty, Sep 13 '22 at 21:22

dr.null · Accepted Answer · 2022-09-14T02:31:02.930

Probably just invalid or at least not well-formatted HTML string. I'd suggest using the XElement syntax to build the HTML output, it helps to write the tags and attributes correctly...

Dim pdfBytes = 'The PDF byte array...
Dim pdfBase64 = Convert.ToBase64String(pdfBytes)
Dim html =
    <html>
        <body>
            <iframe
                width="100%"
                height="100%"
                src=<%= $"data:application/pdf;base64,{pdfBase64}" %>>
            </iframe>
        </body>
    </html>.ToString()

WebView21.NavigateToString(html)

Nice VB.NET feature.

AKEAmazan · Answer 2 · 2022-09-22T10:56:01.233

0

can you try height="auto"; what is your parent div's height?

html<iframe src="/default.asp" width="100%" height="auto" style="border:1px solid black;"> </iframe>

edited Sep 22 '22 at 10:56

answered Sep 13 '22 at 19:54

AKEAmazan

11
3

You can provide with a clear example with code format. For example: ```html ```` – Kiry Meas Sep 21 '22 at 09:23

K J · Answer 3 · 2022-09-14T02:54:34.423

iframe height only allows height=pixels so 100%=minimum (default=150)

see HTML5 iFrame is only 150px in height

there are many workarounds to try to hold the frame via other settings and a good suggested method is by @Alohci https://stackoverflow.com/a/24964263/10802527

result see the sidebar

For simplicity of a single frame try

<style>
html, body, iframe { border: none; height: 98%; }
</style>

But simplest is decide a desired height. Workarounds may not work well based on user settings

How do I make an iframe show at 100%?

3 Answers3