When utilizing an Android webview to load a basic HTML page, I encountered an issue where the content div with 100% width and height was not visible on a Galaxy Nexus 4.4.2 device. This problem did not occur when viewed in a browser.
Below are the settings for the webview:
setScrollContainer(false);
setBackgroundColor(Color.RED);
setHorizontalScrollBarEnabled(false);
setHorizontalScrollbarOverlay(false);
setVerticalScrollBarEnabled(false);
setVerticalScrollbarOverlay(false);
this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
WebSettings ws = getSettings();
ws.setSupportZoom(false);
ws.setJavaScriptEnabled(true);
ws.setUseWideViewPort(true);
ws.setLoadWithOverviewMode(true);
ws.setCacheMode(WebSettings.LOAD_NO_CACHE);
ws.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
ws.setAllowFileAccess(true);
ws.setAllowFileAccessFromFileURLs(true);
The sample HTML code is as follows:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="no-cache" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta id="myvp" name="viewport" content="width=400, height=300, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<div class="component">
<input type="text">
</div>
</body>
</html>
Furthermore, here is the CSS used:
body {
background-color: blue;
}
.component {
width: 100%;
height: 100%;
background-color: green;
overflow: hidden;
}
Despite expecting a green box containing a text field, only the blue background of the body was visible. Adjusting the settings or replacing percentages with fixed values resulted in different issues, such as the inability to select the text field.
It seems that the component div may not be appearing due to a width/height issue when using percentages. Does anyone have insight into this problem and why text input is restricted?
Thank you