# Custom search box in the detail tab

**URL:** https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086
**Category:** Ask for Help
**Created:** [June 17, 2021, 4:55pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086 "2021-06-17T16:55:33Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [June 17, 2021, 4:55pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/1 "2021-06-17T16:55:33Z")

</div>

Greetings to all  
Analyzing the detail of the tabs, I noticed that using the classic search box, when in the next step the application goes to the list of topics found, it loses the custom icon that I added with the CSS code.  
In your opinion, is there any way to add the described code? Or is there a method to have in detail a custom search box?  
I’ve scoured the community a bit, but it really seems like no one has ever had the same thought as me.  
As always, I thank you in advance for your responses! 😉

---

<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: [June 17, 2021, 11:44pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/2 "2021-06-17T23:44:43Z")

</div>

This is a good idea. I have just written this code assuming your search box (text entry) is the 1st component on the screen.

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(1) .tf-inner {
color: black;
height: 36px;
border-radius: 10px;
background: rgba(0,0,0,0.05);
padding: 0px 6px 12px;
-webkit-box-align: center;
width: 100%;
border-bottom: none;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .ta-inputbox {
padding: 6px;
}

```

> **[Screen Recording 2021-06-18 at 06.42.41 AM](https://media.lowcode.agency/QwuAEEzo)**

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 9, 2021, 4:50pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/3 "2021-10-09T16:50:13Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> <pre><span><style>
> div[id*='screenScrollView'] > div > :nth-of-type(1) .tf-inner {
> color: black;
> height: 36px;
> border-radius: 10px;
> background: rgba(0,0,0,0.05);
> padding: 0px 6px 12px;
> -webkit-box-align: center;
> width: 100%;
> border-bottom: none;
> }
> 
> div[id*='screenScrollView'] > div > :nth-of-type(1) .ta-inputbox {
> padding: 6px;
> }
> 
> ```

Hi @ThinhDinh I wanted to let you know that your CSS doesn’t seem to be working anymore. You can no longer see the search bar. What could have changed? 😊

---

<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: [October 9, 2021, 11:39pm UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/4 "2021-10-09T23:39:37Z")

</div>

They changed the structure of the entry components a while ago, and it looks much like what I was trying to do in the code anyway, so I just have a text entry with this as the placeholder: “🔍 Search”

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

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 7:14am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/5 "2021-10-10T07:14:28Z")

</div>

So, could you make an update to this code?

---

<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: [October 10, 2021, 7:23am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/6 "2021-10-10T07:23:18Z")

</div>

I can but it will take time to structure that again. Does the method above not work for you?

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 7:25am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/7 "2021-10-10T07:25:07Z")

</div>

I just can’t see the search field with the icon anymore ☹

---

<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: [October 10, 2021, 7:38am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/8 "2021-10-10T07:38:13Z")

</div>

Try removing the rich text you use with the old code and use the magnifying glass + search I specified above as the placeholder for the rich text.

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 8:03am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/9 "2021-10-10T08:03:58Z")

</div>

I tried with a new tab, detail, entered the code in RT, but nothing shows up

---

<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: [October 10, 2021, 8:05am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/10 "2021-10-10T08:05:19Z")

</div>

No I mean you should not use the rich text anymore, just have a text entry and put “🔍 Search” as your placeholder for text entry. We don’t need CSS here anymore.

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 8:09am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/11 "2021-10-10T08:09:31Z")

</div>

I don’t think I understood what you said. I only understood that you no longer need to write the CSS code. I just wanted to remind you that I need to use the search in a list, but not with Glide’s search.

---

<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: [October 10, 2021, 8:13am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/12 "2021-10-10T08:13:06Z")

</div>

Yeah, what I had here is a sole text entry with “🔍 Search” as my placeholder. Can you retry that on your screen?

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

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 8:19am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/13 "2021-10-10T08:19:34Z")

</div>

It looks like this to me 😊

 ![screenshot-go.glideapps.com-2021.10.10-10-17-53](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/51a46ff5c1ce3fba94b8061877d4e7f8c5698e90.png)

---

<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: [October 10, 2021, 8:23am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/14 "2021-10-10T08:23:45Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bf1e83b18555add28ee7fcd3cebfa8aaea98a74c.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/148531ec6954287762bf180f51bc2b8ca2410f5f.jpeg)

It looks like this to me. Can you confirm you have the same setup?

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 8:33am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/15 "2021-10-10T08:33:27Z")

</div>

I confirm that it comes as you do. So if I now enter a list of things to search with the same field it finds them for me?

 ![screenshot-go.glideapps.com-2021.10.10-10-32-05](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/e/9ef8a2dc71bd48a9c9a5d33625696948d82cb588.jpeg)

---

<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: [October 10, 2021, 8:35am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/16 "2021-10-10T08:35:46Z")

</div>

As long as you have the right filter conditions for the inline list then it should work 😉 Remember you have to connect the user-specific column you are writing to with the actual inline lists that you will filter by this “search”.

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 8:37am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/17 "2021-10-10T08:37:51Z")

</div>

I will try. In the meantime, thank you for your valuable time.

---

<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: [October 10, 2021, 8:39am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/18 "2021-10-10T08:39:17Z")

</div>

My pleasure to help! Hit me up with questions, if any.

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [October 10, 2021, 9:12am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/19 "2021-10-10T09:12:07Z")

</div>

Thank you very much @ThinhDinh, it works perfectly 👌 💪

---

<div class="post-metadata">

### Author: ![HouseHippo](https://avatars.discourse-cdn.com/v4/letter/h/6f9a4e/32.png) [@HouseHippo](https://community.glideapps.com/u/HouseHippo)
#### Post date: [October 12, 2021, 12:24am UTC](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086/20 "2021-10-12T00:24:11Z")

</div>

@ThinhDinh Here from my other thread. Can you screenview your relation construction much slower? Still learning relations and can’t get this working.

What column relates to which in tableview? Thanks!

[Next page](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086.md?page=2)