🙈 CSS to hide any list UNTIL you search!

Community Resources
1

I’ve always wanted the ability to only display list items when the user is actively searching for something.

Without CSS, the only way to do this will be to use a user specific text column, followed by a query, and then displaying a list with that query as the source.

However, with custom CSS, you can use the :has(.is-searching-something) pseudo class with some visibility styling on any type of collection to provide the same experience without any additional data columns!

Steps:

  1. Create a collection and give it a custom class (eg. listSearch)
  2. Add this CSS in Settings → Appearance
    Note: I’m targeting a Table Collection, so I’m using the [class*=”new-table-lib”] class. Other Collection types will have a different class to target.
.listSearch:not(:has(.is-searching-something)) [class*="new-table-lib"] {
    display: none;
}
v2

:cross_mark:visibility:hidden style still retains component height even though there’s hidden content.

.listSearch:not(:has(.is-searching-something)) [class*="new-table-lib"] {
    visibility: hidden;
}
v1

:cross_mark: Can be combined into a singular CSS block using the :not(:has()) pseudo class.

.listSearch [class*="new-table-lib"] {
visibility: hidden;
}

.listSearch:has(.is-searching-something) [class*="new-table-lib"] {
visibility: visible;
}

🙈 CSS to hide any list UNTIL you search! - #2 by Himaladin

Take a look at the video below for the end effect!

8 Likes
2

Why not try using just one CSS block, like this?

.listSearch:not(:has(.is-searching-something)) [class*="new-table-lib"] {
    visibility: hidden;
}
3 Likes
3

Brilliant!

1 Like
4

Love the way you guys work to make Glide better! :clap: :clap:

2 Likes