CODEWITHSUNDEEP
ioswebviewcodenameone
ygesher
ygesher

Reputation: 1161

CodenameOne: Webview not scrollable in iOS version of app

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.

Upvotes: 1

Views: 137

Answers (2)

steve hannah
steve hannah

Reputation: 4716

I just committed a fix for the scrolling issue in iOS here. There was a bug that caused scrolling to be disabled if you call setNativeScrollingEnabled(true). This fix will be available in the next library update (next Friday). In the mean time, you can work around this by just not calling setNativeScrollingEnabled(true) - as the default is true anyways.

Upvotes: 0

Shai Almog
Shai Almog

Reputation: 52760

That might be related to changes we made to getComponentAt see if this is still happening after the update this weekend. We discussed some of the regressions related to this here: https://www.codenameone.com/blog/dont-touch-that-code.html

Upvotes: 0

Related Questions