WebView inside ScrollView not scrolling.

Question

WebView inside ScrollView not scrolling.

jrahma 116

Hi,

I have below code and it does not work for me. The WebView is just not scrolling and cannot read the full article.

How can I fix this please?

<ScrollView Grid.Row="0" Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Scrolled="ScrollView_Scrolled">
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <FFImageLoading:CachedImage x:Name="ImageNews" Margin="0,0,0,0" Aspect="Fill" HorizontalOptions="FillAndExpand" HeightRequest="250" LoadingPlaceholder="Logo.png" FadeAnimationEnabled="True" DownsampleToViewSize="true">
                <FFImageLoading:CachedImage.HeightRequest>
                    <OnIdiom x:TypeArguments="x:Double" Phone="200" Tablet="400" />
                </FFImageLoading:CachedImage.HeightRequest>
        </FFImageLoading:CachedImage>

        <Label x:Name="LabelNewsTitle" Margin="10" FontSize="Large" FontAttributes="Bold" />

        <Label x:Name="LabelNewsSource" />
        <Label x:Name="LabelNewsDate" />

        <WebView x:Name="WebViewNewsArticle" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
    </StackLayout>
</ScrollView>

Thanks,
Jassim

1 answer

Your answer

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

As a test, I modified your code as follows and I set the height of WebView to 1000 :

<ScrollView Grid.Row="0" Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >  
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">  
  
  
        <Label x:Name="LabelNewsTitle" Margin="10" FontSize="Large" FontAttributes="Bold"  Text="LabelNewsTitle"/>  
  
        <Label x:Name="LabelNewsSource"  Text="LabelNewsSource"/>  
        <Label x:Name="LabelNewsDate" Text="LabelNewsDate" />  
  
        <WebView x:Name="WebViewNewsArticle" HeightRequest="1000" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Green" />  
    </StackLayout>  
</ScrollView>

In MainPage.xaml.cs

public partial class MainPage : ContentPage  
{  
    public MainPage()  
    {  
        InitializeComponent();  

        WebViewNewsArticle.Source = new HtmlWebViewSource  
        {  
            Html = @"<!DOCTYPE html><html><head><style>img { width:100%; }</style></head><body>" + "test page" + @"</body></html>",  
        };  
    }  
}

The WebView in above code could scroll properly.

So I guess the height of your WebView is enough to display on one screen, without scrolling at all.

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

jrahma 116 Reputation points

2021-02-03T19:41:10.427+00:00

But I don't want to set a Height for the WebView because some news articles might be longer than 1000? for example I tried 1000 and it worked for most of the articles except one because it's longer.

Is there any way to set it to auto height?
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-02-04T06:29:54.257+00:00

But I don't want to set a Height for the WebView

I added the height just to make the WebView itself taller than the screen.
I did another test by loading a page,it also could scroll properly.

`WebViewNewsArticle.Source = "https://dotnet.microsoft.com/apps/xamarin";`

The result is:

Share via

WebView inside ScrollView not scrolling.

1 answer

Your answer