Filterable hiding listview items breaks zebra striping

[jzaefferer]

I've got a filterable listview with some custom themeing, to apply zebra striping to the listview. When filtering the listview, items are hidden, but not removed, so the CSS selector still matches them, breaking the striping: http://jsbin.com/UKEQAj/2/edit (type "j" into the input to see the same colors next to each other)

I couldn't find any way to address this with CSS alone. Apparently there is no selector that would exclude hidden elements. Maybe I missed something though.

Assuming a JS solution is necessary, I need a way to hook into the filterable to apply odd/even classes after filtering. Filterable only provides a "beforefilter" event, which doesn't help me. Maybe adding another event to filterable is the answer here?

[jaspermdegroot]

@jzaefferer - I looked into CSS solutions, but you are right that there is none.

[PangbornIdentity]

The returned filtered rows should have an override css class for stripes no?

[jzaefferer]

Since this can't be solved with CSS we need a separate event. For now we're adding one as an extension:

// Workaround for https://github.com/jquery/jquery-mobile/issues/6580
// Part 1: Add a postfilter option and callback, passing along all items
$.widget("mobile.filterable", $.mobile.filterable, {
    _filterItems: function() {
        this._superApply(arguments);
        this._trigger("postfilter", null, {
            items: this._getFilterableItems()
        });
    }
});

We then use the postfilter callback when creating the filterable:

element.filterable({
    // Workaround for https://github.com/jquery/jquery-mobile/issues/6580
    // Part 2: Apply custom classes for proper zebra striping
    postfilter: function(event, ui) {
        ui.items
            .removeClass("custom-even custom-odd")
            .not(".ui-screen-hidden")
            .filter(":even")
                .addClass("custom-even")
            .end()
            .filter(":odd")
                .addClass("custom-odd");
    }
});

Is this approach valid to implement within the filterable widget itself? I could then look into putting together a PR.

[arschmitz]

yes i think this is a perfectly valid approach a pr would be great.

[jaspermdegroot]

+1

[jzaefferer]

Here's some CSS-only solutions: http://christianheilmann.com/2013/12/12/zebra-tables-using-nth-child-and-hidden-rows/

[jaspermdegroot]

@jzaefferer

That article shows that the CSS-only "solutions" don't work. The author's final solution uses JavaScript.