# 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:** 2

<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, 1:00am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/21 "2024-06-21T01:00:51Z")

</div>

No, it has no effect. Try copying and pasting the code above again.

---

<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, 1:03am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/22 "2024-06-21T01:03:53Z")

</div>

that’s strange then… i re-copied it and it still places the button on the left.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f79a3124acd2542b62c73f6059f255b9cc15efce.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, 1:06am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/23 "2024-06-21T01:06:53Z")

</div>

This is just plain HTML and CSS-inline, you can turn on “use compiled CSS” to see if any other CSS is causing it. Apart from that, make sure that this richtext component does not need to be given a class name.

---

<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, 1:12am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/24 "2024-06-21T01:12:42Z")

</div>

ok, thanks! I found the clash. I forgot to delete the code from the settings so it was appearing twice.

The button is on the right now.

Now that that’s out of the way, can I decrease the text font size or maybe reduce the column padding a bit? @Himaladin

---

<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, 1:22am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/25 "2024-06-21T01:22:58Z")

</div>

```auto
.entryStyle textarea {
font-size:10px;
padding:12px 12px;
}

```

---

<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, 1:30am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/26 "2024-06-21T01:30:22Z")

</div>

not noticing any difference

---

<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, 1:32am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/27 "2024-06-21T01:32:40Z")

</div>

> [@Himaladin](#):
>
> `entryStyle`

Have you given a class name?

---

<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, 1:33am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/28 "2024-06-21T01:33:34Z")

</div>

yes, i gave it the class

---

<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, 1:37am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/29 "2024-06-21T01:37:23Z")

</div>

I’m senile, it turns out you use number entry not text entry.

```auto
.entryStyle [data-testid="wf-input"] {
font-size:10px;
padding:12px 12px;
}

```

---

<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, 1:43am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/30 "2024-06-21T01:43:10Z")

</div>

> [@Himaladin](#):
>
> ```auto
> .entryStyle [data-testid="wf-input"] {
> font-size:10px;
> padding:12px 12px;
> }
> 
> ```

haha ok. It works now!  
But I think it clashes with the rich text delete button. Did you try it?  
Seems to pull the delete-button position down.

---

<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, 1:48am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/31 "2024-06-21T01:48:27Z")

</div>

> [@Sekayi\_Liburd](#):
>
> But I think it clashes with the rich text delete button.

No. It’s not related. However, the problem is that the margin/padding of your entry when viewed on mobile and desktop may be different.

---

<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, 1:50am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/32 "2024-06-21T01:50:15Z")

</div>

I had to decrease the delete-button margin to position it properly:  
“margin-top:-53px;”

But it doesn’t work well in both mobile and desktop views.

I had to remove all of my delete buttons… undo wouldn’t fix them back. ☹

---

<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, 1:58am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/33 "2024-06-21T01:58:44Z")

</div>

Place your delete button below the entry number, not above it.  
Later this afternoon I will give you the code to correct the default distance (margin/padding) from Glide which makes richtext unable to have consistent distance between the two devices.

---

<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, 2:03am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/34 "2024-06-21T02:03:34Z")

</div>

they were below the entries.  
I will wait for your fix before I put them back.

---

<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, 2:09am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/35 "2024-06-21T02:09:26Z")

</div>

I’ve got the code. I was annoyed because the dashboard performance was very slow. This is the correct setting, you should copy it again.

```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>

```

Give the class a name you like or use “delBtn” in your richtext component. This code will remove different margin-tops across mobile and desktop.

```auto
[data-testid="wire-container-delBtn"] {
	margin-top:0 !important;
}

```

---

<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, 2:21am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/36 "2024-06-21T02:21:16Z")

</div>

Why is it that when I start typing, the container height changes? I think this causes the displacement in the button position.

---

<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, 2:28am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/37 "2024-06-21T02:28:22Z")

</div>

Yes, that’s a common behavior called auto-expanding in a textarea.

---

<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, 2:29am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/38 "2024-06-21T02:29:37Z")

</div>

oh ok

---

<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, 2:57am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/39 "2024-06-21T02:57:08Z")

</div>

```auto

/*delete button CSS*/
[data-testid="wire-container-deleteBtn"] {
	margin-top:0 !important;
}
[data-testid="wire-container-deleteBtn"] [data-test="app-markdown-view"] {
	position:absolute;
	display:flex;
	justify-content:flex-end;
	left:auto;
	right:calc(var(--container-x-pad) + 10px);
	width:fit-content;
}

```

This was the cause of the buttons appearing on the right in the threeColumn container grid… but I need it to keep the container shape when entering texts or numbers… do you have any suggestions?

---

<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, 3:24am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/40 "2024-06-21T03:24:15Z")

</div>

> [@Himaladin](#):
>
> ```auto
> [data-testid="wire-container-delBtn"] {
> margin-top:0 !important;
> }
> 
> ```

Just need this with different classes. Does this interfere with your input?

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

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