How to remove Unnecessary Space around WebView

Question

I have WebView and label inside VerticalStackLayout of Collection View.

I have tried lot with margin=0 and padding=0 and other alignment options but still extra unnecessary white space is appearing,The extra space is of WebView itself, which I dont know how to remove.

<CollectionView>

<CollectionView.ItemTemplate>


<DataTemplate>

    <VerticalStackLayout  >
     <WebView  Margin="0" VerticalOptions="StartAndExpand" >


       <WebView.Source>

         <HtmlWebViewSource Html="{Binding DisplayForWebView}" />

      </WebView.Source>
    </WebView>

<Label TextType="Html" FontSize="22" 

 Padding="5"  LineHeight="1.5" LineBreakMode="WordWrap" Margin="2"

Text="{Binding DisplayForWebView}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  /> 


        </VerticalStackLayout>

    </DataTemplate>

</CollectionView.ItemTemplate>
</CollectionView>

Undesired OutPut

Answer 1

How to set webview Height to Auto ,I have already set in Body and span while binding content.

You can not set height to auto. If you use the webview in the VerticalStackLayout, you need to set specific height request and width request

See Important part of WebView document:

A WebView must specify its HeightRequest and WidthRequest properties when contained in a HorizontalStackLayout, StackLayout, or VerticalStackLayout. If you fail to specify these properties, the WebView will not render.

Answer 2

its probably the webview's height which is independent of it content height. also the html page hosted in the webview can have margins. if you wanted the webview to be only the size of the content, then after dom load, call javascript in the webview to get the content size, and adjust webview height

note: using WebViews in a list view is not recommended as you can run into memory issues. also sizing based on content can be difficult is the context layout is responsive.