# 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:** 16\
**Page:** 3

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

</div>

I changed it to this but the button remains on the left. Should I place the class in a different spot? Right now it’s on the rich text component.

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

```

---

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

</div>

> [@Sekayi\_Liburd](#):
>
> ```auto
> /*delete button CSS*/
> [data-testid="wire-container-delBtn"] {
> margin-top:0 !important;
> }
> 
> ```

All that is needed is this code, no need to add other codes.

---

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

</div>

> [@Himaladin](#):
>
> All that is needed is this code, no need to add other codes.

but then the container shifts when I type and the app looks weird.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cf11da17e01ceb8ea60653434a267c16e820a4cc.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, 10:37am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/44 "2024-06-21T10:37:29Z")

</div>

Works fine on me.

 ![Screenshot 2024-06-21 at 17.27.49](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/87df5c91ab86f68e114721a7f7213da8ea597f55.png)  
 ![Screenshot 2024-06-21 at 17.28.10](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9a6e48e3f92bbbb72f4cf7672aab3e2cfd062609.png)  
 ![Screenshot 2024-06-21 at 17.28.40](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73f16f1b8ea3695b6e56da97dadd56c9d58d7afe.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, 10:41am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/45 "2024-06-21T10:41:25Z")

</div>

it works without shift even when you only enter numbers into 1 of the columns?

---

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

</div>

It might be a problem that your delete button is hidden, so the container does center alignment. Try using top alignment.

---

<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, 11:05am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/47 "2024-06-21T11:05:45Z")

</div>

thanks, top alignment fixes the relative shift between the column.

Another issue is that the placement of the button is on top of the arrows that are visible on desktop mode. 😅

![Screenshot 2024-06-21 070249](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e09ce4d808da8482616ace41560fb66cc1ded0e.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, 11:09am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/48 "2024-06-21T11:09:55Z")

</div>

So what do you expect? Why is your number input aligned to the right?

---

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

</div>

I moved the text to the right to accommodate the delete button on the left. It does not affect anything else. I can align-left again if everything else is fixed. But at the moment, I’m not sure I like the shifting container size and also the delete button appearing on top of these arrows does not work for me. It’s messy.

---

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

</div>

Do you want to remove the spinner arrow?

---

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

</div>

yes thanks, that would be better.  
But I also have a question @Himaladin … Why is the container perfect when I use the full code but then we need to delete the other codes to keep the delete button to the right??  
Shouldn’t there be a way to accomplish the fixed container size AND the delete button to the right?

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

```

---

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

</div>

```auto
.entryStyle [data-testid="wf-input"]::-webkit-inner-spin-button{
display: none;
}

```

> [@Sekayi\_Liburd](#):
>
> Why is the container perfect when I use the full code but then we need to delete the other codes to keep the delete button to the right??

This code simply sets up a richtext container that is empty due to being left behind by the HTML from your delete button 👻. Under certain conditions this will disturb the components located beneath it.

Please use it and see the difference:

```auto
[data-testid="wire-container-delBtn"] [data-test="app-markdown-view"] {
	position:absolute;
	display:flex;
	justify-content:flex-end;
    left: auto;
	right:0;
	width:fit-content;
}

```

---

<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:02pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/53 "2024-06-21T12:02:29Z")

</div>

yes!!! This is perfection 🙌 🥳 🥳

---

<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 22, 2024, 9:30pm UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/54 "2024-06-22T21:30:50Z")

</div>

~~@Himaladin I just noticed that while the number entries are now perfect, the codes shifted the normal text entry delete button. What can we do to fix this?~~

Nevermind, I re-added the original code with the deleteBtn class to use for the text entries. 👍

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c5011bdaf3456684d5fdb03f2c60cade6bc6a27.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 23, 2024, 12:40am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/55 "2024-06-23T00:40:05Z")

</div>

Yes, they are different, two conditions with different distances from the right.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [June 30, 2024, 12:40am UTC](https://community.glideapps.com/t/how-to-create-filter-bar-like-this/74273/56 "2024-06-30T00:40:50Z")

</div>

Closed on June 30, 2024, 12:40am UTC

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

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