Size WebView to content

[marco-skizza]

trafficstars

Description

Dear MAUI team

I'm very interested in a way to make a WebView adapt its size automatically to the containing HTML content.

See also the Enhancement request from Xamarin back then: https://github.com/xamarin/Xamarin.Forms/issues/1711

I thought I'd reopen the feature request for MAUI, because I haven't found it in the list...

Public API Changes

Add a bindable property SizeToContent to WebView:

        <WebView SizeToContent="true">
          ...
        </WebView>

When this property is true, the WebView should attempt to size itself to the minimum size necessary to fit the web content being displayed. Auto-sizing should take place only along unspecified dimensions; e.g., if a WidthRequest or HorizontalOptions.Fill are in play, the WebView should honor those specifications and only size itself vertically to fit the content.

Intended Use-Case

I think it's a common use case to display HTML content as a whole. This feature request is to make all the workarounds obsolete that everyone currently uses.

[Eilon]

The linked Xamarin.Forms issue has a lot of interesting discussion. A key thing to note is that web content doesn't 'have' a size because by its nature it can adjust its size to fit almost any size. It's quite common to use CSS media queries to change the size of content to adapt to different size screens.

For example, this very web page has one layout for a 'wide' screen:

And a very different layout for a 'narrow' screen (only a few pixels narrower):

Depending on how much space you provide for the page to render you could get an entirely different content size.

So, which of these is the 'right' size to calculate?

[marco-skizza]

Yes, I already thought about that as well. For me, the WebView indeed can't adapt to the width of a website, because it doesn't have a defined value.

All the discussion in the Xamarin thread seem to be about adjusting the height of the WebView. Maybe we should change the "adapt its size" to "adapt its height"...?

[Eilon]

Even adjusting the height can be tricky. Web content by its nature can also be dynamic. Once again, even on this very page we're on, with a click of a button I can change the height of the content (by clicking the Write or Preview tab). Some content changes size based on user interaction (click, hover, type), and some changes on its own, such as via a timer, or once dynamic/delayed content loads. For example, let's say the HTML content includes <img src="https://reallyslowwebsite.example.com/very_large_image.jpg" />. If you quickly try to figure out the size of the page it'll possibly be very small. But once that very large and slow image loads, the desired size is likely much larger.

BTW I think it would be cool if there was some way to have such an auto-size or auto-height feature, but I think it could work only in very constrained scenarios. Those constraints might be just fine for most common scenarios, but in my view it's logically impossible to have it work in all scenarios automatically.

[marco-skizza]

Thanks Eilon

I tought for example about the Expander control from the CommunityToolkit. There you can change the size/height of the control as well - with a click for example:

I think it could be something similar here with adjusting the height - but not upon a click. The people in the Xamarin thread checked for height changes in WebView via JavaScript. But maybe there is also a more native way to achive this...

[hansmbakker]

I have one usecase for this ask.

Imagine I want to build a page displaying a news article. I would build it on a ContentPage like this:

• ScrollView
  • VerticalStackLayout
    • Image (illustration)
    • Label (for the title)
    • WebView (for the article body. This content is static, so it does not resize)

I want to prevent scrolling inside the WebView. Instead I want the full page to scroll. However, this seems impossible using the current features of the WebView - even when setting the WebView height to a large value.

Related to https://github.com/dotnet/maui/issues/14349

[marco-skizza]

@hansmbakker

Yes, this would also be my use case: Just displaying HTML as it was an Image or a Label or the like.

However, when setting the HeightRequest to a big enough value, this already works for me on WinUI and iOS. Are you talking about WinUI "swallowing" the cursor? Then you might try InputTransparent="True"...?

[hansmbakker]

Just displaying HTML as it was an Image or a Label or the like exactly, that's my goal.

Technically Label has does have limited support for HTML, but unfortunately it seems not very reliable. Its support differs per platform and there are multiple issues about it.

Personally I see that at least hyperlinks are lost on Windows when rendering my article content using a Label.

@marco-skizza regarding Webindeed InputTransparent="True" prevents swallowing the cursor but that will also prevent clicking links inside the article I want to render.

[hansmbakker]

One workaround could be, if the static HTML is very simple: process it into a FormattedString (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/label?view=net-maui-8.0#create-a-hyperlink) but that's ugly at the same time

[marco-skizza]

As I see it, my use case is a very limited one. Others want to possibly navigate using links, opening menu controls or the like. So always recalculating the size in those cases doesn't seems a good idea to me, either. So I think we should see the WebView as what it is: A browser area with a defined size...