# Beautiful Design App

**URL:** https://community.glideapps.com/t/beautiful-design-app/16191
**Category:** Project Showcase
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")
**Posts on this page:** 20
**Page:** 34

<div class="post-metadata">

### Author: ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)
#### Post date: [June 15, 2021, 5:28pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/668 "2021-06-15T17:28:39Z")

</div>

Guys, thanks so much for the tip, now I feel my apps are so much more alive with this new addition!

---

<div class="post-metadata">

### Author: ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)
#### Post date: [June 15, 2021, 6:56pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/669 "2021-06-15T18:56:58Z")

</div>

Woooow!!

---

<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: [June 15, 2021, 7:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/670 "2021-06-15T19:10:30Z")

</div>

Right. Only way to target the selected choice is to use unnamed classes.

@Jason, we’d LOVE a way to have a “menu/tabs” choice component style like this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d0eabf66a0915f0a25d45b6c463ccbae7a7ef1c6.png)

---

<div class="post-metadata">

### Author: ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)
#### Post date: [June 16, 2021, 1:19pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/671 "2021-06-16T13:19:06Z")

</div>

Joe this is a really cool project - are you working on this alone?

I had a very similar idea for a difference target audience, would be cool to get your thoughts and 🧠 storm

---

<div class="post-metadata">

### Author: ![Harry\_OBrien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harry_obrien/32/14485_2.png) [@Harry\_OBrien](https://community.glideapps.com/u/Harry_OBrien)
#### Post date: [June 16, 2021, 1:59pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/672 "2021-06-16T13:59:12Z")

</div>

Read this as a challenge 😉 this code below produces something similar.

However a native option for this really would make a lot of sense

```auto
[data-test="app-inline-picker"] {
    padding: 0px;
    margin: 0px;
}

[data-test="app-inline-picker"] .ips-inner {
    padding: 0px;
    margin:0px;
    height: 46px;
    background: transparent !important;
}

.bYahys {
color: rgb(0 0 0);}

.dMZZie {
    color: #000;
    background-color: transparent;
    border-radius: 0;
    border-bottom: solid;
    border-bottom-color: black;
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
}

```

 ![Screenshot 2021-06-16 at 14.59.59](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/16296ce1cf7721708aa76cc6ebbbd8d26bc9d7ea.png)

---

<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: [June 16, 2021, 2:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/673 "2021-06-16T14:23:09Z")

</div>

Right. As you’ve shown, you can create the interface, BUT it requires you to use unnamed classes:

> [@Harry\_OBrien](#):
>
> ```auto
> .bYahys {
> color: rgb(0 0 0);}
> 
> .dMZZie {
> color: #000;
> 
> ```

These are volatile and subject to change at a moment’s notice which breaks the CSS.

---

<div class="post-metadata">

### Author: ![Sergio\_Perez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sergio_perez/32/19444_2.png) [@Sergio\_Perez](https://community.glideapps.com/u/Sergio_Perez)
#### Post date: [June 16, 2021, 4:40pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/674 "2021-06-16T16:40:43Z")

</div>

Hello people, I bring you my little contribution. I hope you like it.

 ![stickemapp.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bd415929dadd9923563576294383e2dddaa9ba9b.jpeg)

---

<div class="post-metadata">

### Author: ![V88](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/v88/32/90054_2.png) [@V88](https://community.glideapps.com/u/V88)
#### Post date: [June 16, 2021, 5:27pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/675 "2021-06-16T17:27:42Z")

</div>

That would be so nice +1

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [June 17, 2021, 12:16am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/676 "2021-06-17T00:16:15Z")

</div>

Yep I’ve done everything myself! Sure, you can pM me any questions and I’ll try and help!

---

<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:46pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/677 "2021-06-17T23:46:37Z")

</div>

Inspired by this topic, which brought up the fact that we can’t apply CSS to a search screen, I bring you a custom 🔍search box based on a text entry.

> [@Custom search box in the detail tab](https://community.glideapps.com/t/custom-search-box-in-the-detail-tab/28086):
>
> 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 resp…

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

```

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [June 18, 2021, 12:15am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/678 "2021-06-18T00:15:41Z")

</div>

This is genius @ThinhDinh

Thanks so much!

---

<div class="post-metadata">

### Author: ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [June 18, 2021, 12:44am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/679 "2021-06-18T00:44:53Z")

</div>

I concur, this is genius!

---

<div class="post-metadata">

### Author: ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)
#### Post date: [June 18, 2021, 3:16am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/680 "2021-06-18T03:16:40Z")

</div>

Genius bro 👏

---

<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 18, 2021, 3:22am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/681 "2021-06-18T03:22:31Z")

</div>

It goes a bit deeper than just the name (as I show here) if you want to search for other columns inside the rows of the inline list, but I’m sure with more “or” filters we can do that.

---

<div class="post-metadata">

### Author: ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)
#### Post date: [June 18, 2021, 3:24am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/682 "2021-06-18T03:24:25Z")

</div>

if the first letter of the name could be extracted in another column it would automatically be very precise

---

<div class="post-metadata">

### Author: ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)
#### Post date: [June 18, 2021, 2:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/683 "2021-06-18T14:00:51Z")

</div>

This is so cool ThinhDinh! Definitely going to use this somewhere! Thanks for sharing!

It made me think - why is it that the “native” search bar provided by Glide can return dynamic results to individual users but just a normal Text Entry Component and Text Column cannot? Is the native search bar “user-specific” by default? Would a native search bar as its own Component and/or Action be possible? 🤔🤓

---

<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 18, 2021, 3:13pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/684 "2021-06-18T15:13:00Z")

</div>

Wow that was fast. A truly smart mind.  
Thanks also for the short video, I will try to develop what you quickly developed in CSS. I hope to get a good understanding of how you devised the system. If you had some time to articulate it all better that would be wonderful.  
Thanks for the time you and everyone else devotes to this community. I can tell it is a subject you enjoy and you do it gladly. 💪

---

<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 18, 2021, 11:18pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/685 "2021-06-18T23:18:31Z")

</div>

> [@ehdubya](#):
>
> It made me think - why is it that the “native” search bar provided by Glide can return dynamic results to individual users but just a normal Text Entry Component and Text Column cannot? Is the native search bar “user-specific” by default?

Yes, the search bar is user-specific by default and handled internally by Glide. I doubt we need a further native search bar component as you may only want to search on lists, and we can enable that from the lists themselves. What can be handled better is if there are no searchable components visible on the screen then the search bar should be hidden.

> [@profxeni](#):
>
> Thanks also for the short video, I will try to develop what you quickly developed in CSS. I hope to get a good understanding of how you devised the system. If you had some time to articulate it all better that would be wonderful.

Thanks for the kind words, the CSS includes two parts, which are also two elements within the text entry component, as far as I understand. We have a tf-inner class combined with a ta-inputbox class to make up the component.

The first part in the CSS tries to imitate the greyish background of the search bar, while the second one re-positions the input box so it fits with the background in the first part.

---

<div class="post-metadata">

### Author: ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)
#### Post date: [June 26, 2021, 4:08pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/686 "2021-06-26T16:08:58Z")

</div>

I recently created an annotations tab, in which I can choose the color of each note with the help of CSS. Did you like it?

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [June 26, 2021, 4:19pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/687 "2021-06-26T16:19:52Z")

</div>

@Pedroydzito

Impressive!

[Previous page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=33)

[Next page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=35)