How to prevent scrollbar from obscuring WebView content on UWP?

JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

On UWP desktop, when a WebView contains more content than will fit on screen, scrollbars appear to allow the user to view the off-screen content. However, the scrollbars overlay content in the WebView. In the scenario that I am using WebView, I cannot change the web page content at source.

Does anybody know if Windows.UI.Xaml.Controls.WebView provides the facility to prevent the scrollbars overlaying content?

If that facility isn't possible, I guess I'll end up injecting some JavaScript to tweak the appearance of the page being viewed.

Best Answer

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭
    edited October 6 Accepted Answer

    @NMackay - I already had a WebView custom renderer in place for UWP, which injects some JavaScript into any page that it loads. To prevent the scrollbar from obscuring content of the WebView, I added the following to the existing C# string that gets injected as JavaScript. It's a bit simplistic at the moment, as it will currently overwrite any existing style attribute on the HTML body element, but it's sufficient for my current purpose.

              // On UWP, scrollbars are 16px wide according to 
              // https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/scroll-controls
              // so we tweak the viewport margins to avoid the scrollbar obscuring content.
              "var marginSetter = function() "
              + "{"
              + "        try"
              + "        {"
              + "             var item = document.getElementsByTagName('body')[0];"
              + "             var styleAttr = item.getAttribute('style');"
              + "             if (styleAttr == null)"
              + "             {"
              + "               item.setAttribute('style', 'margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px');"
              + "             } "
              + "             else "
              + "             {"
              //                TODO - In the else condition, need to do string manipulation to avoid overwriting aspects of style other than margin-left and margin-right
              + "               item.setAttribute('style', 'margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px');"
              + "             } " 
              + "        }" 
              + "        catch (err)"
              + "        {"
              + "           window.alert(err);" // existing method that pops up an Alert in C# code
              + "        }"
              + "};"
              + "marginSetter();";
    

Answers

  • NMackayNMackay GBInsider, University ✭✭✭✭✭
    edited September 22

    @JohnHardman

    You know your in trouble when you use Google and your question comes up 1st :smile:

    "Xamarin forms webview scrollbar UWP"

    I guessing there's no way to easily provide padding to the WebView content, the Javascript 'tweak' is probably the quickest fix.

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭
    edited October 6 Accepted Answer

    @NMackay - I already had a WebView custom renderer in place for UWP, which injects some JavaScript into any page that it loads. To prevent the scrollbar from obscuring content of the WebView, I added the following to the existing C# string that gets injected as JavaScript. It's a bit simplistic at the moment, as it will currently overwrite any existing style attribute on the HTML body element, but it's sufficient for my current purpose.

              // On UWP, scrollbars are 16px wide according to 
              // https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/scroll-controls
              // so we tweak the viewport margins to avoid the scrollbar obscuring content.
              "var marginSetter = function() "
              + "{"
              + "        try"
              + "        {"
              + "             var item = document.getElementsByTagName('body')[0];"
              + "             var styleAttr = item.getAttribute('style');"
              + "             if (styleAttr == null)"
              + "             {"
              + "               item.setAttribute('style', 'margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px');"
              + "             } "
              + "             else "
              + "             {"
              //                TODO - In the else condition, need to do string manipulation to avoid overwriting aspects of style other than margin-left and margin-right
              + "               item.setAttribute('style', 'margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:20px');"
              + "             } " 
              + "        }" 
              + "        catch (err)"
              + "        {"
              + "           window.alert(err);" // existing method that pops up an Alert in C# code
              + "        }"
              + "};"
              + "marginSetter();";
    
Sign In or Register to comment.