1

I am currently creating a Xamarin Forms app that features a webview which has to cover my whole device screen.

Unfortunately I can not figure out how to do it, I always have a white bar underneath, is this a bug? I switched off my navbar, as I do not wan to show that. I used the hybrid webview as explained here

I already tried using grid, stacklayout and absolute layout,

Update Already tried ti set padding and margin to 0 in the layout and the webview, does not work either..

my current layout looks like this:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:EatyAndroidApp.Controls"
             mc:Ignorable="d"
             x:Class="EatyAndroidApp.CustomWebViewPage"
             NavigationPage.HasNavigationBar="False"
             NavigationPage.HasBackButton="False"
             BackgroundColor="#313131">
    <ContentPage.Content>

        <StackLayout HorizontalOptions="Fill" VerticalOptions="Center">
            <controls:HybridWebView
            x:Name="hybridWebView"
            BackgroundColor="#313131"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            />
        </StackLayout>

    </ContentPage.Content>

</ContentPage>

which produces me this: (I blurred out the content) Image

Thank you in advance

Andreas
  • 83
  • 1
  • 1
  • 12
  • Something like: https://stackoverflow.com/questions/50101902/webview-and-iframe-video-full-screen-issue/50103945#50103945 ? – SushiHangover Sep 18 '19 at 14:29
  • I dont want it to be fullscreen, I want i to fill the context of the app :/ – Andreas Sep 18 '19 at 15:34
  • What happens if you remove the StackLayout? There shouldn't be any reason to have it if the HybridWebView is the only thing on the screen. – Andrew Sep 18 '19 at 19:45
  • Sorry, I couldn't reproduce this question, could you please share a baisc demo so that we can test with it? – Jessie Zhang -MSFT Sep 19 '19 at 02:53
  • Can you try using AbsoluteLayout something like this... – Hamid Shaikh Sep 19 '19 at 07:23
  • It is a similar issue like here: https://forums.xamarin.com/discussion/133637/webview-not-filling-the-screen-in-xamarin-forms-why-is-there-a-gap-at-the-top But also no solution was found – Andreas Sep 23 '19 at 07:44
  • Well. I can't see any space in the screen based on your code. Could you please share a basic demo so that others could help you better? – Jessie Zhang -MSFT Sep 24 '19 at 07:57
  • The problem only appears inside a hybridwebview, not within a normal webview, and only with this one special webpage I am not able to share, Is it somehow possible that CSS is not rendered properly on the hybrid webview? – Andreas Sep 28 '19 at 09:57
  • Well, I couldn't reproduce this question with hybridwebview on my side. – Jessie Zhang -MSFT Oct 07 '19 at 06:38

1 Answers1

0

Ok, I figured it out, somehow, the webview was not aware of its height and width, I had to manually access it via Javascript and set the new Layout:
Inside
public override async void OnPageFinished(Android.Webkit.WebView view, string url)
just execute

view.EvaluateJavascript("document.documentElement.style.height = screen.height + 'px';", null);

Andreas
  • 83
  • 1
  • 1
  • 12