The ability to customise the design of filters (to prevent messy/ugly layouts!)

Feature Requests
1

It would be a very nice feature if (in addition to configuring how they work) users were able to configure the display of the filters.

The variables could model the common UI elements in other parts of Noloco:

  • Width
  • Grouping
  • Color
  • For drop downs, styling

Screenshot_20240925_041437
Screenshot_20240925_0414371099×356 14.3 KB

4 Likes
2

Adding to this! I think having the option to move the filters to the left/right of the group would also be nice.

In my current use-case, I would like the filters to be in ‘tag’ style on the left so users can easily choose the options they want see.

image
image1064×781 75 KB

1 Like
3

The noloco dev team is gonna end me one of these days for encouraging CSS malpractice hahah… but yea, you can totally customize the filter positioning with customized flex-box settings.

ezgif-48f82801d055f

Get the container and all its child elements…

I inspected the container of the filter and copied the entire collection of filter divs.

Paste the entire contents of the filter holder div into chat gpt with a prompt describing what it current looks like and what you’d like it to look like…

Here’s a collection of fields, they are currently stacted in two columns of 2 main fields… using just CSS how might we rework them into one row? My thinking is each field should have an equal width, then when hovered it expands to show contents? (other shrink)… Flex baby!

include your HTML of the divs in the prompt.

Example:

<div class="my-3 flex flex-wrap items-end justify-end gap-y-2"><button class="relative hidden h-10 w-10 items-center justify-center rounded-lg border p-2 sm:flex">

... all your filters and what not... 

</span></div></div></button></div></div></div></div>

It somehow worked and output the following in my case (i wouldn’t use this in yours, my description of what i wanted was unique to these filters, not a universal:

/* Force the container into a single row */
.my-3.flex {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 8px; /* Optional gap between fields */
}

/* Each filter field takes equal space by default */
.my-3.flex > .collection-filter[data-testid="collection-filters"] {
  flex: 1 1 0%;
  transition: flex 0.3s ease;
  overflow: hidden; /* Hide overflow if content expands */
}

/* When hovering over the container, non-hovered fields shrink */
.my-3.flex:hover > .collection-filter[data-testid="collection-filters"]:not(:hover) {
  flex: 0.8 1 0%;
}

/* The hovered field expands */
.my-3.flex > .collection-filter[data-testid="collection-filters"]:hover {
  flex: 2 1 0%;
  z-index: 1; /* Bring it above siblings if needed */
}
1 Like
4

Lol love the css wins, but I tend to use it sparingly because anything can change in their backend that may break the html configs.

I’m always looking to offer suggestions of ways to improve out-of-the-box functionality that may benefit others who may not want to dive into css customization.

5

I’d love to see inline filters, clean and fast. Each column could have their own filter box above the data so no extra space needed.

6

Oh for sure, i do not recommend this route lol