New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filterable hiding listview items breaks zebra striping #6580

Closed
jzaefferer opened this Issue Oct 9, 2013 · 7 comments

Comments

Projects
None yet
4 participants
@jzaefferer
Member

jzaefferer commented Oct 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Oct 9, 2013

Member

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

Member

jaspermdegroot commented Oct 9, 2013

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

@PangbornIdentity

This comment has been minimized.

Show comment
Hide comment
@PangbornIdentity

PangbornIdentity Nov 27, 2013

Contributor

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

Contributor

PangbornIdentity commented Nov 27, 2013

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

@jzaefferer

This comment has been minimized.

Show comment
Hide comment
@jzaefferer

jzaefferer Dec 2, 2013

Member

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.

Member

jzaefferer commented Dec 2, 2013

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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Dec 2, 2013

Member

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

Member

arschmitz commented Dec 2, 2013

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot
Member

jaspermdegroot commented Dec 2, 2013

+1

@jzaefferer

This comment has been minimized.

Show comment
Hide comment
Member

jzaefferer commented Jan 1, 2014

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 13, 2014

Member

@jzaefferer

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

Member

jaspermdegroot commented Jan 13, 2014

@jzaefferer

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment