this.ScalesPageToFit = true; has no effect

Hello,

I'm trying to implement a custom view renderer for my WebView and I can't figure out how to get a large webpage to automatically scale to fit the viewport.

using System;
using Xamarin.Forms.Platform.iOS;
using UIKit;
using Xamarin.Forms;
using ButtonCode;
using ButtonCode.iOS;
using Foundation;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace ButtonCode.iOS
{
    public partial class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {

            base.OnElementChanged(e);

            if (e.OldElement==null)
            {
                this.ScalesPageToFit = true;
                //this.ScrollView.ScrollEnabled = false;
            }
        }
    }
}

The code executes without error or warning. To be sure that the web view object is being accessed I tried another property, this.ScrollView.ScrollEnabled, and setting it to false had the expected effect.

Posts

  • adamkempadamkemp USInsider, Developer Group Leader mod

    The code should use if (Control != null) instead of checking for OldElement == null. If that doesn't work attach an example project.

    Also, be aware of this bug.

  • ScottYannitellScottYannitell USMember

    Hi Adam,

    Here is my custom class:

    using System;
    
    using Xamarin.Forms;
    using System.Diagnostics;
    
    namespace ButtonCode
    {
        public class DayspringWebView : ContentPage
        {
            public DayspringWebView (String url)
            {
                var webView = new CustomWebView();
    
                webView.Source = url;
                Content = webView;
                webView.Navigated += (sender, e) => {
    
    
    
                    String myBookmarklet = "(function(){\n" +
                        "var myClasses = document.querySelectorAll('.right_shadow'),\n" +
                        "        i = 0,\n" +
                        "        l = myClasses.length;\n" +
                        "\n" +
                        "    for (i; i < l; i++) {\n" +
                        "        myClasses[i].style.display = 'none';\n" +
                        "    }\n" +
                        "var myClasses2 = document.querySelectorAll('.left_shadow'),\n" +
                        "       i = 0,\n" +
                        "       l = myClasses.length;\n" +
                        "\n" +
                        "    for (i; i < l; i++) {\n" +
                        "        myClasses[i].style.display = 'none';\n" +
                        "    }\n" +
                        "\t\n" +
                        "document.getElementById('header').style.display = 'none';\n" +
                        "document.getElementById('bottom').style.display = 'none';\n" +
                        "document.getElementById('footer').style.display = 'none';\n" +
                        "document.getElementById('sidebar').style.display = 'none';\n" +
                        "document.getElementById('main').style.width = \'700px\';\n" + 
                        "})();";
    
                    //webView.Eval(myBookmarklet);
    
                };
            }
        }
    
        public class CustomWebView : WebView {
    
        }
    }
    

    and my custom renderer:

    using System;
    using Xamarin.Forms.Platform.iOS;
    using UIKit;
    using Xamarin.Forms;
    using ButtonCode;
    using ButtonCode.iOS;
    using Foundation;
    
    [assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
    namespace ButtonCode.iOS
    {
        public partial class CustomWebViewRenderer : WebViewRenderer
        {
            protected override void OnElementChanged(VisualElementChangedEventArgs e)
            {
    
                base.OnElementChanged(e);
    
                if (e.OldElement==null)
                {
                    this.ScrollView.Frame = this.Bounds;
                    this.ScalesPageToFit = true;
                    //this.ScrollView.ScrollEnabled = false;
                }
            }
        }
    }
    

    I tried setting "if (e.OldElement==null)" to "if (Control != null)" and the keyword Control was red (not sure what to do now). I'm pretty sure that the code is being executed within my statement because if I uncomment out the commented line in there the scrolling action stops.

  • ScottYannitellScottYannitell USMember

    I will need to apply a bookmarklet to my webview using the eval function or some other way. But in this example it only builds the script string, the eval function is commented out. If I comment out the whole navigated event function it still behaves the same.

  • adamkempadamkemp USInsider, Developer Group Leader mod

    If that doesn't work attach an example project.

    Emphasis added. A code snippet isn't very useful. Make a small test project and zip up the whole thing so I can just run it and debug.

  • ScottYannitellScottYannitell USMember

    even a small project is a monster to upload. I've done some tests in swift and the problem partially persists there also. So it looks like this is a non xamarin problem I'm having.

    in swift sometimes the page scales as expected other times it doesn't (different urls).

  • adamkempadamkemp USInsider, Developer Group Leader mod

    Tip for uploading projects for future reference:

    1. Delete all bin and obj directories.
    2. Delete all subdirectories in the packages directory.

    If you do that then the project directory should be just a few hundred Kb.

  • ScottYannitellScottYannitell USMember

    I've found the culprit. The webpage I need to display has a meta tag for viewport and this is causing my sizing problems. I've found that in xcode I can get the page size to view perfectly with this meta tag statement:

    <meta name="viewport" content="width=600,user-scalable=no" />

    on Xamarin it almost works but the left side is getting cut off by about 25 pixels. If i figure out a solution I'll post it here.

    The issue really threw me off because on Android I didn't have to consider this metatag, it just worked out of the box

  • ScottYannitellScottYannitell USMember

    It is looking like this is an impossible thing to fix. I may have to jettison this whole xamarin project.

  • ScottYannitellScottYannitell USMember

    I'm just going to have to rewrite about 16 web pages to fix this that's all. Would be nice if it just worked like xcode does.

  • adamkempadamkemp USInsider, Developer Group Leader mod
    edited July 2015

    There is nothing inherently different about a Xamarin UIWebView and one you get with Xcode. You just need to figure out how they're being used differently. Could you attach example projects for both?

Sign In or Register to comment.