dojox/mobile/ScrollablePane not scrolling

Question

I have been using the esri ArcGIS javascript api for some time now and I am currently creating a mobile-friendly version of one of our applications (http://webapps.kent.gov.uk/KCC.MyNearestGIS.Web.Sites.Public/Default.aspx) using the compact version of the api and dojox mobile.
I want to use a scrollable pane to hold the results of an address search, so that I can keep the search pane small enough to fit on the screens of mobile devices but allow the user to scroll through the results where the size of the RoundRectList exceeds the fixed panel size.
I can't get the ScrollablePane to scroll in IE or Chrome (including the mobile emulators), whether I create it in markup or programmatically and I can't understand why, as I think I am correctly following the examples in the dojo toolkit.
My code is here: https://jsfiddle.net/TimSkinner/ue3ok7v4/

function C_CreateLocationResultsGrid(results, resultsHeight){
require(["dojo/dom",
         "dojo/query",
         "dojo/dom-attr",
         "dojo/dom-prop",
         "dojo/_base/declare",
         "dijit/registry",
         "dojox/grid/DataGrid",
         "dojox/mobile/ScrollablePane",
         "dojox/mobile/RoundRectList",
         "dojox/mobile/LongListMixin",
         "dojox/mobile/ListItem",
         "dojo/on",
         "dojo/domReady!"], function (dom, query, domAttr, domProp, declare, registry, DataGrid, ScrollablePane, RoundRectList, LongListMixin, ListItem, on) {

    if (registry.byId("uxLocationGrid") != 'undefined' && registry.byId("uxLocationGrid") != null) {
        registry.byId("uxLocationGrid").destroy();
    }

    var uxLocationGrid;

    if (registry.byId("uxLocationScrollablePane") != 'undefined' && registry.byId("uxLocationScrollablePane") != null) {
        registry.byId("uxLocationScrollablePane").destroy();
    }

    var uxLocationScrollablePane = new ScrollablePane({
        id: 'uxLocationScrollablePane',
        //srcNodeRef: dom.byId('uxLocationSearchResultsDiv'),
        height: resultsHeight,
        allowNestedScrolls: true,
        scrollBar: true,
        scrollDir: 'v',
        scrollType: 0
    });

    uxLocationGrid = new declare([RoundRectList, LongListMixin])({
        id: 'uxLocationGrid',
        select: '',
        tag: 'ul'
    });

    if (registry.byId("uxLocationListHeader") != 'undefined' && registry.byId("uxLocationListHeader") != null) {
        registry.byId("uxLocationListHeader").destroy();
    }

    var uxLocationListHeader = new ListItem({
        id: 'uxLocationListHeader',
        header: true,
        label: 'Select a location',
        clickable: false
    });

    uxLocationGrid.addChild(uxLocationListHeader);

    var uxLocationListItem;

    for (var i = 0; i < results.length; i++) {
        var listItemId = "uxLocationListItem" + i.toString();

        if (registry.byId(listItemId) != 'undefined' && registry.byId(listItemId) != null) {
            registry.byId(listItemId).destroy();
        }

        uxLocationListItem = new ListItem({
            id: listItemId,
            label: results[i].RESULT,
            variableHeight: true,
            anchorLabel: true,
            onAnchorLabelClicked: C_OnLocationRowClickHandler,
            clickable: true
        });

        uxLocationGrid.addChild(uxLocationListItem);
    }

    uxLocationScrollablePane.domNode.appendChild(uxLocationGrid.domNode);
    dom.byId("uxLocationSearchResultsDiv").appendChild(uxLocationScrollablePane.domNode);

    uxLocationGrid.startup();

    uxLocationScrollablePane.startup();
    uxLocationScrollablePane.resize();
});
}

Answer 1

After trying several different things, I finally got this working by creating the scrollable pane and roundrectlist in markup and then populating the list programmatically. Not sure why this works, but it does.