1

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.

enter image description here

What am I doing wrong?

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

3 Answers 3

2

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)

SO73708467

Nice VB.NET feature.

0

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

enter image description here

For simplicity of a single frame try

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

enter image description here

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

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> 
1
  • You can provide with a clear example with code format. For example: ```html<iframe src="/default.asp" width="100%" height="auto" style="border:1px solid black;"> </iframe> ````
    – Kiry Meas
    Sep 21, 2022 at 9:23

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.