WebView inside ScrollView not scrolling.

jrahma 111

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

JessieZhang-MSFT 7,711 Reputation points Microsoft Vendor

2021-02-03T06:42:11.297+00:00
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.
Please sign in to rate this answer.
jrahma 111 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,711 Reputation points Microsoft Vendor

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:
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

WebView inside ScrollView not scrolling.

1 answer

Your answer