I have an iframe in my Android webview that I am loading like this:
String folderPath = "file:android_asset/";
String fileName = "index.html";
String file = folderPath + fileName;
webView.loadUrl(file);
The iframe is loaded via HTML and CSS files located in my android/assests folder. The HTML and CSS look like this. HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<link rel="stylesheet" type="text/css" href="default.css" />
<div class="abs-frame-container">
<iframe
id="my_frame"
src="my web page link"
scrolling="no"
allowtransparency="true"
style="border:none;overflow:hidden">
</iframe>
</div>
</body>
</html>
and my CSS
#my_frame {
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
width: 117%;
height: 100%;
}
#abs-frame-container{
top: 10%;
bottom: 0%;
position: relative;
}
The webpage in iframe shows fine in the webview. I want to center (vertical alignment) my iframe in the webview so that it aligns automatically based on the webview dimensions (height). Would appreciate a lot if someone could help me how this can be achieved?
You can call custom JavaScript on WebView directly from Java/Kotlin. It is explained in the official documentation.
You can then make JavaScript script that adds CSS styles to parts of loaded html page, and center your iframe that way.