# How to create filter bar like this?

**URL:** <https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273>\
**Category:** Ask for Help\
**Created:** [June 20, 2024, 5:28pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273 "2024-06-20T17:28:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 20, 2024, 5:28pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/1 "2024-06-20T17:28:37Z")

</div>

hi guys! I would like to create a filter bar similar to what @Darren_Murphy shows in this video. More specifically, i would like to have 3 or 4 text entry components appearing on the same line like in the video.  
How do I accomplish it?

> [@Searching everything from the home screen: tabs, collections or rows of data](https://community.glideapps.com/t/searching-everything-from-the-home-screen-tabs-collections-or-rows-of-data/72783/4):
>
> The above is just a fairly simple example of what you can do in terms of custom filtering with data editor logic. For a somewhat more advanced example, check the below video:
> 
> * * *
> 
> _If the above video won’t play, paste the following URL into a browser:_
> 
> ```auto
> https://www.loom.com/share/4398b34185c9435bacdd51b2332db722
> 
> ```

Chat GPT suggested using this code in a rich text component but I wasn’t able to implement it successfully: Maybe I didn’t put the code it the right place…

```auto
<div style="display: flex; justify-content: space-between; align-items: center;">
  <div style="flex: 1; margin-right: 10px;">
    <input type="text" placeholder="Text Entry 1" style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  <div style="flex: 1; margin-right: 10px;">
    <input type="text" placeholder="Text Entry 2" style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  <div style="flex: 1;">
    <input type="text" placeholder="Text Entry 3" style="width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
</div>

```

---

<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:** [June 20, 2024, 6:11pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/2 "2024-06-20T18:11:31Z")

</div>

That just looks like a 4 column container with each component inside the container.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 20, 2024, 6:18pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/3 "2024-06-20T18:18:41Z")

</div>

ok thanks.  
I had actually tried a 3 column container but the components still appeared on separate lines.

---

<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:** [June 20, 2024, 6:25pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/4 "2024-06-20T18:25:13Z")

</div>

Are you previewing in mobile view? The container columns will only be side by side in desktop view. Otherwise, yes, you would have to dig into some CSS.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 20, 2024, 6:27pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/5 "2024-06-20T18:27:36Z")

</div>

yes, I’m previewing in mobile mode. How can I get a nice neat bar for mobile?

I don’t want the filter to take up so much room on the page but I want the option to type in filter parameters.

---

<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:** [June 20, 2024, 6:35pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/6 "2024-06-20T18:35:51Z")

</div>

> **[CSS Library](https://css-library.glide.page/dl/library/s/8836b3/r/amxrKQS0S.ejzWg.8b2JjA)**

> [@How to Maintain Container Layout on Mobile Devices](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021):
>
> Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code. Here’s the code you need to add to your application’s custom CSS: Note: class name is grid-container .grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); }

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 20, 2024, 6:53pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/7 "2024-06-20T18:53:05Z")

</div>

I’ll check it out!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 20, 2024, 11:02pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/8 "2024-06-20T23:02:19Z")

</div>

Wouldn’t 3 columns in a row be too small on mobile?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 20, 2024, 11:06pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/9 "2024-06-20T23:06:44Z")

</div>

it’s kind of small, yes… I’m still testing it out.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/6/369483fa7ad6aa107e5634763c2eeeb0cdab4214.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 20, 2024, 11:07pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/10 "2024-06-20T23:07:37Z")

</div>

Oh, you’ve got the code.

```auto
.grid-container .threeColumns {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 20, 2024, 11:08pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/11 "2024-06-20T23:08:58Z")

</div>

hahaha, I actually played around until I got this same code. Was proud of myself 😆

first i tried .3-columns  
then, .threecolumns  
then .threeColumns

ureka!

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 21, 2024, 12:11am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/12 "2024-06-21T00:11:47Z")

</div>

Can I make the clear search button (done with rich text) right-aligned? And maybe also decrease the font size a little since the boxes are small?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/7/e7a54ceb882bceda7d916bcebe3570504ba81ff4.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 21, 2024, 12:13am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/13 "2024-06-21T00:13:22Z")

</div>

Does the previous code work in this composition?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 21, 2024, 12:14am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/14 "2024-06-21T00:14:24Z")

</div>

yes, it works but the button is showing up on the left instead of on the right of the text entry.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 21, 2024, 12:15am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/15 "2024-06-21T00:15:28Z")

</div>

Try pasting the code again. I forgot where I saved it.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 21, 2024, 12:16am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/16 "2024-06-21T00:16:06Z")

</div>

```auto

<!--Delete Button-->
<div class="cross" style="float: right; margin:0px 2px 0 auto; 
height: 25px;width: 25px; opacity:0.4;border-radius: 10px;
z-index: 5; filter:invert(0.1);"><img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/ov2nF5ayQc4wK5jVvF4R/pub/pJe35hcDzEqIcW2idyHc.webp" alt="Cross Button" style="margin-top:-37px;"/></div>

```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 21, 2024, 12:26am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/17 "2024-06-21T00:26:28Z")

</div>

Still works with float-right.

 ![Screenshot 2024-06-21 at 07.23.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c4e6c2f38f1eb4aca8ded0d1d765f64ca1cfa534.png)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 21, 2024, 12:50am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/18 "2024-06-21T00:50:33Z")

</div>

did you get that result from the code i sent?  
Mine is number entry instead of a text entry… I think this is the issue.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [June 21, 2024, 12:53am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/19 "2024-06-21T00:53:06Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 21, 2024, 12:53am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/20 "2024-06-21T00:53:54Z")

</div>

the number entry has arrows on the right so maybe that’s why my button moved to the left

[Next page](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273.md?page=2)