I am facing an issue while trying to load HTML with CSS that includes an ID selector. The file is not loading to the webview as expected.
Here is the code snippet I attempted to load:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
However, on using the following code below, it loads successfully in the webview:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
I have configured the WebView with these properties:
mWebView.setWebViewClient(new CustomWebViewClient());
mWebView.setWebChromeClient(new CustomWebChromeClient());
mWebView.getSettings().setSupportZoom(true); // ZoomControls
mWebView.getSettings().setBuiltInZoomControls(true); // Multitouch
mWebView.getSettings().setDisplayZoomControls(false);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(CONFIG.webviewEnableViewport());
mWebView.getSettings().setAllowFileAccess(true);
mWebView.requestFocus(View.FOCUS_DOWN);
mWebView.setHorizontalScrollBarEnabled(true);
mWebView.setVerticalScrollBarEnabled(true);
Seeking assistance in resolving this issue. Any help would be appreciated.