# Sticky search!

**URL:** https://community.glideapps.com/t/sticky-search/79399
**Category:** Community Resources
**Created:** [January 22, 2025, 3:35am UTC](https://community.glideapps.com/t/sticky-search/79399 "2025-01-22T03:35:35Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 22, 2025, 3:35am UTC](https://community.glideapps.com/t/sticky-search/79399/1 "2025-01-22T03:35:35Z")

</div>

Here’s some styling to make the search box of a collection sticky. Be sure to name the class of the collection “sticky-search” so that it matches the CSS below:

```auto
.sticky-search [class*="needs-search-only"] {
position: sticky;
top:0;
z-index: 9999;
backdrop-filter: blur(10px);
padding: 0 0 10px 0;
}

```

![CleanShot 2025-01-21 at 22.33.34](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/491aa83aedf1f710dc8ee945cb386afb1391c489.gif)

---

<div class="post-metadata">

### Author: ![Apollo](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Apollo](https://community.glideapps.com/u/Apollo)
#### Post date: [January 23, 2025, 10:35am UTC](https://community.glideapps.com/t/sticky-search/79399/2 "2025-01-23T10:35:26Z")

</div>

Great sticky solution to long lists!

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 24, 2025, 12:00am UTC](https://community.glideapps.com/t/sticky-search/79399/3 "2025-01-24T00:00:44Z")

</div>

Added to the library, thank you!

> **[CSS Library by LowCode Agency](https://css-library.glide.page/dl/library/s/8836b3/r/KV3eUAbjRm2.h1EPAkUdeQ)**

---

<div class="post-metadata">

### Author: ![Surat\_Rattanaphaibo1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/surat_rattanaphaibo1/32/42859_2.png) [@Surat\_Rattanaphaibo1](https://community.glideapps.com/u/Surat_Rattanaphaibo1)
#### Post date: [January 28, 2025, 4:05pm UTC](https://community.glideapps.com/t/sticky-search/79399/4 "2025-01-28T16:05:35Z")

</div>

Thank you.

---

<div class="post-metadata">

### Author: ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)
#### Post date: [February 19, 2025, 3:08pm UTC](https://community.glideapps.com/t/sticky-search/79399/5 "2025-02-19T15:08:14Z")

</div>

Thanks for the demo Bob.

What eludes me at this point is the recipe for adding a css element using a AI component then updating the CSS class to apply the style to the component.

example:

- I have a menu in a container
- I prompted the component to create a class call “foobar”
- When I inspect the container in the browser i see foobar listed as the last class in the div. cool
- I then go into Glide CSS and add the class foobar and apply styles, like position: sticky background: red, etc.
- There is no change to the behavior of the component on the page.

If there is a recipe for glide CSS noobs in a -“do this, then this, format: or even better a video” that would be great.

Thanks

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [February 19, 2025, 3:32pm UTC](https://community.glideapps.com/t/sticky-search/79399/6 "2025-02-19T15:32:23Z")

</div>

Is this specifically referring to styling the AI component or any component?

---

<div class="post-metadata">

### Author: ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)
#### Post date: [February 19, 2025, 4:38pm UTC](https://community.glideapps.com/t/sticky-search/79399/7 "2025-02-19T16:38:48Z")

</div>

The AI component.

I created a menu with a series of buttons using the AI component.

Unsure if assigning a class using a prompt is needed but all I want to do is make the menu sticky

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [February 19, 2025, 4:51pm UTC](https://community.glideapps.com/t/sticky-search/79399/8 "2025-02-19T16:51:41Z")

</div>

AI components are iframes, just like the web embed. Basically a window to another webpage from your main page. You cannot target styles inside an iframe using Glide CSS externally.

If you want to target the entire AI component, you do that through the Options tab for the component and assign a class name. If you want to adjust anything internally inside the AI component, that would be entirely through prompts. Styling would be through prompt, sticky would be externally via the assigned class name on the component.

---

<div class="post-metadata">

### Author: ![Carl\_Johnson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carl_johnson/32/75656_2.png) [@Carl\_Johnson](https://community.glideapps.com/u/Carl_Johnson)
#### Post date: [February 19, 2025, 6:12pm UTC](https://community.glideapps.com/t/sticky-search/79399/9 "2025-02-19T18:12:44Z")

</div>

> [@Jeff\_Hager](#):
>
> Options tab for the component and assign a class name.

thanks for the guidance. **I am figured it out - just needed the top 0; attribute**

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [February 26, 2025, 6:12pm UTC](https://community.glideapps.com/t/sticky-search/79399/10 "2025-02-26T18:12:53Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
