I'm facing a disturbing problem with showing HTML content in WebView
, I've simplified the html content to this for easier reading:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://www.paytabs.com/theme/payment_page/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="https://www.paytabs.com/theme/payment_page/css/custom-rtl.css?timestamp=1540717040" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="text-primary">text one</h1>
<a href="www.stackoverflow.com" class="text-primary">StackOverflow</a>
<div class="container">
<div class="header-title"><h3>Xamarin</h3></div>
</div>
<h3 class="text-success">Success</h3>
<img src="https://i.stack.imgur.com/PwBYM.jpg?s=328&g=1" alt="image"/>
<h1 class="mark">Mark</h1>
<div class="payment-wrap">
<div>
<label class="payment_method">
<input type="radio" id="creditcard" name="payment_type" value="creditcard">
<img src="https://www.paytabs.com/images/img/cards.png" width="75" alt="Credit Card">
</label>
</div>
<div class="form-wrap sadad-hide" style="display:none;">
<input class="form-control" placeholder="Enter user" value="" maxlength="12" name="olpalias" id="olpalias" autocomplete="off" type="text">
</div>
<span class="whats-this sadad-hide" style="display:none;">Don't have account?</span>
<!--Sadad Enable-->
<div id="pt-sadad-enable-outer">
<div id="pt-sadad-enable" class="pt-sadad-enable-wrap pt-arrow">
<div class="pt-sadad-enable-inner">
<h2>How to activate?</h2>
<ul class="pt-sadad-htp">
<li class="step1 step-help">
<figure>
<img class="img-help" src="https://www.paytabs.com/images/sadad/p1.png" width="50" height="32">
<figcaption>Activate online</figcaption>
</figure>
</li>
<li class="step2 step-help">
<figure>
<img class="img-help" src="https://www.paytabs.com/images/sadad/p2.png" width="48" height="33">
<figcaption>Create sadad account</figcaption>
</figure>
</li>
<li class="step3 step-help">
<figure>
<img class="img-help" src="https://www.paytabs.com/images/sadad/p3.png" width="27" height="33">
<figcaption>Add to your account</figcaption>
</figure>
</li>
</ul>
<a href="https://www.sadad.com/ar/Personal/Pages/RegisterNow.aspx" class="pt-sadad-btn" target="_blank">learn more</a>
</div>
</div>
</div>
<!-- End Sadad Enable Note-->
</div>
</body>
</html>
And here I set the Source
of the webView
:
public MainPage()
{
InitializeComponent();
webView.Source = new HtmlWebViewSource
{
Html = Resource1.testHtml //containing the HTML above
};
}
Here's what's shown on Android (normal):
iPhone:
I tried to use WkWebViewRenderer
instead of UIWebView
, by adding this in the AssembyInfo.cs file of the iOS project:
[assembly: ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WkWebViewRenderer))]
But this just shrunk the page size:
Any help?