Display in-app filter choices in custom order

[gannonatwork]

Love the in-app filter but it’s a little light on styling. Is there any way to force filter options to display in a custom order instead of the default alpha order? Needless to say, not the best look when displaying days of the week.

[Himaladin]

Would you like a solution using CSS? However, in this case, the class names will not apply, so you won’t be able to isolate the css effects to other components on the same screen.

[gannonatwork]

Hi, @Himaladin. I’m using css elsewhere in the app, but not sure if I want to style something without classes and possibly introduce a conflict with other components down the line if Glide changes something in the future. I appreciate the offer though!

[Himaladin]

Since the fly-out is at the root level, I haven’t found a way to isolate it per component, but it might still be possible if it’s on different screens. As long as it’s just for playing around or testing, you can give it a try.

#root:has(.filterSequence) .children-container > div {
  display: grid;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(1) {
    order: 5;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(2) {
    order: 1;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(3) {
    order: 6;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(4) {
    order: 7;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(5) {
    order: 4;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(6) {
    order: 2;
}
#root:has(.filterSequence) .children-container > div > div:nth-child(7) {
    order: 3;
}

[Himaladin]

Revision:

I've found a way to isolate it... by anchoring it to the title you can assign in the In-App Filter. So, it doesn't require a class name, for example, here it would be 'Days'.

#root:has([data-testid="filter-group-header-Days"])
.children-container > div {
  display: grid;
}
#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(1) {
    order: 5;
}

#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(2) {
    order: 1;
}

#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(3) {
    order: 6;
}
#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(4) {
    order: 7;
}

#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(5) {
    order: 4;
}

#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(6) {
    order: 2;
}
#root:has([data-testid="filter-group-header-Days"]) .children-container > div > div:nth-child(7) {
    order: 3;
}

[gannonatwork]

@Himaladin Thx for going the extra mile to find a workaround on this, much appreciated!

[Himaladin]

You’re welcome. I think this isn’t a workaround; it’s more of a “do it yourself” approach.
This code is safe from spilling over and affecting other components.