Menu
In my Xamarin Forms app I have a WebView used as a form by inserting a div with contentEditable set to true. It all worked fine until the update to AppCompat styles.
Now, a strange white overlay (white square) appears when the user tries to write inside the WebView, that disappears when the keyboard is dismissed. In order to find the root cause of the problem I have created a sample project with just one page containing just a vertical stack layout containing another stack layout and the webview. What I have noticed is that this problem happens if the height of the internal stack layout is enough for the webview to be covered by the keyboard when it appears. In this case the webview is pushed up, and this strange overlay appears. The webview is fully functional, and it is possible to write text, even though it is hidden by this white square, that disappears when the keyboard is dismissed.
This is an example of a simple page that can be used to test the issue. The buttons have been added only to increase and decrease the size of the layout to show the problem more easily
public class MainPage : ContentPage
{
const string ContentEdit = @"<div contentEditable=""true"" style =""min-height: 200px"">";
const string ContentEditEnd = "</div>";
const string EmptyDocument = @"<body>" + ContentEdit + ContentEditEnd + @"</body>";
WebView webView;
public MainPage()
{
InitializePage();
}
void InitializePage()
{
webView = new WebView()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
var button1 = new Button
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Text = "-",
};
var button2 = new Button
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Text = "+",
};
var tallLayout = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HeightRequest = 200,
BackgroundColor = Color.Lime,
Children = { button1, button2, },
};
button1.Clicked += (sender, e) => tallLayout.HeightRequest = tallLayout.Height - 20;
button2.Clicked += (sender, e) => tallLayout.HeightRequest = tallLayout.Height + 20;
var layout = new StackLayout
{
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { tallLayout, webView },
};
Content = layout;
}
protected override void OnAppearing()
{
InitializeEmptyContent();
}
public void InitializeEmptyContent()
{
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = EmptyDocument;
webView.Source = htmlSource;
}
}
I have tried to reproduce this simple layout also just using native Android, but it seems I don't have any similar bug. Is this a Xamarin Forms bug or am I doing something wrong?
418
In the end the problem was recognised as a Xamarin bug.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
