Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Webview] height 0 when we inspect with google chrome
See original GitHub issueDescription
I load one of my website into a webview on the main Page of my .net MAUI App
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:CustomWebView x:Name="webView" Grid.Row="0">
</controls:CustomWebView>
</Grid>
public class CustomWebView : WebView
{
public CustomWebView()
{
#if __ANDROID__
global::Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);// enable remote device in chrome
#endif
}
}
But my webapp inside the webview have a strange design. for example, height 100% are not respected load this simple html
<html style="height: 100%">
<body style="height: 100%">
<div style="height: 100%; width: 50px; background-color: red">
</div>
</body>
</html>
we actually see nothing in the webview, all elements have an height of 0px you Inspect the html node with chrome://inspect/#devices (debugging in android device with debugging usb enable) to verify it
when i load the webapp directly with chrome on the device, i don’t have this problem. Same when i install it with PWA
Steps to Reproduce
- Create a .NET Maui App
- put a webview in the main page with any url which exist
- deploy on targeting android physical device
- inspect the webview with chrome, you will see the height of the html at 0px (put height 100%, i will change nothing)
Version with bug
Preview 12 (current)
Last version that worked well
Unknown/Other
Affected platforms
Android
Affected platform versions
Android 11
Did you find any workaround?
no, except force the height with javascript in my webapp, but i don’t target all element so i still have strange design on layover, modals, this kind of stuff
document.querySelector("html").style.height =
document.querySelector("body").style.height =
document.querySelector(".app-loading").style.height =
window.innerHeight + "px";
Relevant log output
No response
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
If it can help anyone, I managed to patch this issue using the same approach as here: https://github.com/SKLn-Rad/Xam.Plugin.Webview/issues/11
Basically, you need to use a Android-specific webview handler and set the LayoutParameters property of your Android.Webkit.WebView to match the parent. For example :
This is no longer an issue. Tested with net6 and net7 and it all renders fine and has the correct heights everywhere: