Bootstrap Listview not scrolling in subpage

[Marcelo_Oliveira]

Hi,

I have a bootstrap project and I have a subpage with a footer (with a grouped buttons) and a listview. This listview is inside a row. I have already tried to use the listview inside a column, but both has the same problem with the listview.

I use a webservice to load the listview. I am using an ajax jquery, like the code below:

    /* button  #btn_bancos */
    $(document).on("click", "#btn_bancos", function(evt)
    {
        var webMethod1 = "http://my_webservice_address";
        
        $.ajax({
            type: "POST",
            dataType: "XML",
            url: webMethod1,
            success: parseXMLBancos
        })
        .fail(function(jqXHR, textStatus) {
            myAppProcessing.hideProcessing();
            alert( "Request failed: " + textStatus );
        });
    });

function parseXMLBancos(xmlBancos)
{
    // Limpa a linha de template original do listview
    $("#lst_bancos").empty();

    // Percorre todas as ocorrências retornadas pelo serviço
    $(xmlBancos).find("Bancos").each(function() {
        var codigo = $(this).find('CdBanco').text();
        var sigla = $(this).find('SgBancoComCodigo').text();

        var banco = '<a class="list-group-item allow-badge widget" data-uib="twitter%20bootstrap/list_item" data-ver="1"><h4 class="list-group-item-heading">' + codigo + '</h4><p class="list-group-item-text">' + sigla +'</p></a>';

        $("#lst_bancos").append(banco);
    });

    activate_subpage("#bancos");

    myAppProcessing.hideProcessing();
}

My app works fine in the emulator. But when I try to use it in the app preview and directly in my smartphone, the listview do not scrolls. It is loaded correctly, but I can not scrolls it. It seems to be locked.

But If I do the same thing using a page, it works. I really wanna use a subpage, because I wanna use my footer navigation menu, which is the same in all pages.

Is there any thing more to do to force the listview scrolling ? 

Thanks,

Marcelo.

[Marcelo_Oliveira]

I am sending two videos, one with the emulation and the other inside app viewer, to illustrate my problem.

[Marcelo_Oliveira]

Hi,

Is there anybody able to solve my problem ??? I need with urgency to solve that... I have already done all the things to make my listviews rolling, but I can´t do it runs in app  preview, only in emulation mode.

Best regards,

Marcelo.

[Chris_P_Intel]

Offhand, I don't have a quick solution.  Get it hooked up for debugging so you can walk the DOM on device and make changes live.

I would checkout the following:

• build the app, and confirm the problem there too, rather than App Preview.
• check the overflow CSS setting (and the overflow-y setting). Normally, it should be 'auto' for scrolling. You can try setting it to 'scroll'. There are various places you can look for it:  html / body / uwrap / upage / page-content / row / col / ul
• sub-pages and the like may have height:100% on them.  You can try setting that to 'auto'.  

One approach would be to experiment with the overflow-y setting set to scroll. That will cause it to _always_ scroll. Try that out on various levels ( html / body / uwrap / upage / page-content ) to see if any is satisfactory. 

[Marcelo_Oliveira]

Hi Chris,

My app apk do not work in my device.

When I started the debugging using my device together, the Intel XDK IDE installed a plugin, to be able to debug using my device. After the installation has been done, and I start the debugging mode, my app changes a little, and I begin to see a vertical scrollbar at the right hand of the listview and my listview scrolling starts working, without any css modification.

But, if I cancel the debug mode, my listview stops working again, and returns the same problem, without the vertical scrollbar at the right hand of listview, and the listview locked. So, I think that making any css change is not a effective way...

So, I think this is a bug using Bootstrap. The webview used to debug is not the same as the original, so this happens.

What do you think about ? 

Regards,

Marcelo.

[PaulF_IntelCorp]

Marcelo, try using the Debug tab, not the Test tab to run and debug your app. When you run in the Debug tab you can get a full remote CDT session to debug that app AND, more importantly, your app is running inside a modern webview (Crosswalk). The standard webview on most Android devices is very deficient when it comes to modern HTML5 features, this is why we have the Crosswalk build option for Android devices.

[Marcelo_Oliveira]

Hi Paul,

I am sending a new video about my debug mode. You will see that in debug mode, my app works fine. Nothing need to be done on css, cause the listview starts working  fine.

But, if I stop my debug mode, the app returns to the default webview, and all the listview problems comes back.

I do not need to do any change to my css to see what is going on, cause in test and debugging mode the listview works... Why / How ? I don´t know. 

I am almost given up from Intel Xdk !!

I am having so many kind of troubles using Intel XDK, that I am thinking about abandon the Intel Xdk and return to the command line process.

I am loosing 3 weeks with this stupid problem ... It´s unacceptable !!!

I ask you to simulate this project in your IDE and you will see it by yourself. I put two videos here showing the situation. And now, I am sending another video, from my debug mode, to proove that my app only works in test/debug mode. 

I would like to know what Intel tells about that ? Am I the only one developer in the world having this trouble ?!?!?!

Thanks,
Marcelo.

[PaulF_IntelCorp]

Marcelo, I see you have three apps you've attempted to build, which of these three is the one you are showing in your video?

Also, you indicate you were doing this by hand. You are NOT required to use App Designer to create your layout, if you know how to create layout and feel comfortable with that I advise that you do your layout by hand and use the XDK as a debug and build tool. Unfortunately, many people believe they must use the UI designer inside of the XDK, this is not the case, the UI designer is an optional element. For those developers how are already expert at implementing layout by hand the UI designer may be a hindrance, not a help. If you are in that category, I encourage you to build your layout by hand and use the other aspects of the tool to speed your development.

I'll see if I can duplicate your issues with the copies of the apps that are sitting in the build system. I suspect this is an App Designer issue and will have to be looked into by the appropriate engineer.

[PaulF_IntelCorp]

When running inside App Preview you are running in the native Android webview. If your device is running Android 4.3 or less that webview is very deficient and is likely the reason for the behavior you are seeing. This is why we offer the Crosswalk build option, it allows you to use a modern webview on Android 4.0 and higher devices (sorry, there's nothing we can do for Android 2.x and 3.x devices).

Use the Debug tab and build using Crosswalk. See this article http://blogs.intel.com/evangelists/2014/09/02/html5-web-app-webview-app/ and this doc page: https://software.intel.com/en-us/xdk/docs/why-use-crosswalk-for-android-builds

[Marcelo_Oliveira]

Hi Paul,

Take a look at the image I am sending from my apks... I have built using crosswalk, and I got an apk with 19MB !!! It is surreal !!!

I installed in my Samsung S3 and I resolved my listview problem, but all my design became messed up. The subpages mixes their layouts when I navigate from or to, images do not disappear in the screen after navigation, my footer buttons disappears, although I can use it if I click in the space where the menu should stay.

I am sending a couple of images to show you the problem now.

So, I think this croswalk build option is a worst way to solve my problem.

Regards,
Marcelo

[PaulF_IntelCorp]

The larger size APK is due to the fact that there is an alternate webview embedded with your APK. This is far better than the inconsistent and deficient webviews that are resident in so many Android devices. Try running your app on some other Android devices and you'll see what I mean. Once you see that you'll agree that Crosswalk is the better path. See these articles for some explanation as to why you should use Crosswalk: http://blogs.intel.com/evangelists/2014/09/02/html5-web-app-webview-app/ and https://software.intel.com/en-us/xdk/docs/why-use-crosswalk-for-android-...

There have been some rendering issues with Crosswalk 11, which is probably the version you're using. Try setting the Crosswalk version field on the Projects tab to 7 and see how things work with that (when you use the Debug tab).

Are you using App Designer or are you building the layout yourself, by hand? Doing the layout by hand is fine, and preferred if you are comfortable with that approach. App Designer (the UI layout tool) is only optional and will limit what you can do if you are an expert at layout.

p.s. Most Samsung devices have an option to capture the screen by swiping the edge of your hand across the screen. Otherwise, most other Android devices can capture the screen by pushing the volume-down and power buttons simultaneously for about two seconds. That's usually much easier than taking a photo with your camera. :)