Search code examples
xamarin.androidandroid-webviewandroid-linearlayoutmarginpadding

Xamarin Android - How to get rid of inexplicable Margin/Padding around a WebView?

I have a LinearLayout which contains a WebView inside of it. This WebView loads a static HTML file. I want the WebView's size (width and height) to match that of the LinearLayout, but for some inexplicable reason there is this mysterious margin or padding preventing the WebView from filling the LinearLayout. To illustrate, I have given the LinearLayout a black border and the content of the HTML file being loaded by the WebView a red border:

Visual of issue using borders

Here is the axml for these elements:

<LinearLayout
        android:id="@+id/alertViewProductReplacement_ReplacementProductLinearLayout"
        android:layout_width="100dp"
        android:layout_height="225dp"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:fillViewport="true"
        android:layout_toRightOf="@id/alertViewProductReplacement_arrow"
        android:background="@drawable/dpBorder"
        android:orientation="vertical">
        <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/replacementProductsWebView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:fillViewport="true"
            android:layout_margin="0dp"
            android:padding="0dp"
            android:background="@null"/>
</LinearLayout>

Some likely redundant things to point out above that I have tried is setting the margin and padding for both to 0, setting the height and width of the WebView to "fill_parent", and setting fillViewport="true". I have also tried forcing 0 margin and padding programatically as well as changing the LinearLayout to a RelativeLayout. None of these things have had any effect, it always looks the same with that small amount of space between them.

I'll also point out that the HTML content itself has no margin or padding outside of the red border, this is clearly observed if I load the HTML file up in a browser directly: enter image description here

I have even tried to just brute force hack it by setting a negative margin both at the axml level as well as at the HTML file level, but I can't get that mysterious margin to budge no matter what I try so I have finally turned here.

Solution

  • WebView is kind of web browser and has some default margin in body (like other web browsers). you can remove that margin using CSS like so:

    <body style="margin:0;">

    More info: Remove unwanted White Space in WebView Android