Question

I want to create a header containing an input field that persists across sublists, retaining the content the user has typed in so far.

If I just use standard listviews, the header scrolls away on sublists.

I’ve tried a number of things, including detaching the header and re-attaching it to the event supplied by pagebeforeshow, and that sort of works except that I can’t get the content below the header to reformat:

$('div.ui-page').live('pagebeforeshow', function(event, ui) {

    // Remove any header that's already there, as there will be for a sublist view
    $(event.currentTarget).find(".ui-header").not("#myheader").remove();

    // Add my header
    var header = $('#myheader');
    header.detach();
    header.prependTo(event.currentTarget);
}

Any ideas? Thanks!

Answer 1

Hmm.. removing data-position=”fixed” from the header seemed to do the trick. Now things space correctly..