I have a legacy cn1 app (using the old GUI builder) with a web browser component in the center of the Form (centered in a BorderLayout Container which is the main Form component). In the simulator as well as on an Android device the WebBrowser renders fine. In the iOS simulator the entire component shows up as a black rectangle, and on an iPhone (5s running iOS 9.1), the content of the WebBrowser is visible but doesn't scroll.
Is there some particular setting that needs to be changed for it be scrollable?
This is my code:
WebBrowser web = new WebBrowser() {
@Override
public void onLoad(String url) {
System.out.println("Article body webview loaded");
Component c = getInternal();
if (c instanceof BrowserComponent) {
BrowserComponent b = (BrowserComponent) c;
String text = ((String) m.currentArticleInfo.get("id"));
b.execute("loadArticle('" + text + "')");
}
}
};
((BrowserComponent) web.getInternal()).setNativeScrollingEnabled(true);
((BrowserComponent) web.getInternal()).setScrollVisible(false);
web.setScrollVisible(false);
web.setURL("jar:///article_body.html");
web.setScrollable(true);
web.getAllStyles().setPaddingTop(10);
form.addComponent(BorderLayout.CENTER, web);
I don't see any errors in the console. The web page code looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.example.com/styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body::-webkit-scrollbar{
width: 0 !important;
}
#left_side_article #right #the_article #details_info{
font-size: 3.5mm !important;
}
div#the_article{
border: none !important;
}
div#the_article_header{
padding: 0 !important;
}
</style>
</head>
<body style="min-height: 100px">
<div id="left_side_article">
<div id="right">
<div id="the_article">
<div id="details_info" >
</div>
</div>
</div>
</div>
<script>
function loadArticle(content) {
console.log('in load article function, article id: ' + content);
var url = "https://www.example.com/api/article_body_ajax.php";
$.post(url,{"app_code": "myappcode", "id" : content},function(data,status,jqxhr){
$("#details_info").html(data);
$("#details_info img").each(function(){
$(this).attr("src", "https://www.example.com/" + $(this).attr("src"));
$(this).css("height", "auto");
});
});
};
</script>
</body>
</html>
Update
I tried debugging the WebView by downloading the app sources and using Safari to inspect the page. Safari recognized that there was a web page open in the app, and I was able to choose it from the Develop menu in Safari, but the inspect window was completely empty - no elements whatsoever.
