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

<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 28, 2021, 12:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/688 "2021-06-28T00:21:55Z")

</div>

Little code to help “filling” a button when being hovered.

```auto
<pre><span><style>

[data-test="app-button-view"] {
background-color: transparent !important;
border: 1px solid transparent !important;
margin: 10px 90px;
color: #006570 !important;
border-color: #006570 !important;
}

[data-test="app-button-view"]:hover {
color: #fff !important;
background-color: #006570 !important;
border-color: #006570 !important;
}

```

---

<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: [July 2, 2021, 2:12am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/689 "2021-07-02T02:12:10Z")

</div>

A code to help with horizontal visibility issues.

[https://community.glideapps.com/t/inline-list-horitzontal-ortientation-issues/28431/17?u=thinhdinh](https://community.glideapps.com/t/inline-list-horitzontal-ortientation-issues/28431/17)

---

<div class="post-metadata">

### Author: ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)
#### Post date: [July 2, 2021, 10:35am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/690 "2021-07-02T10:35:25Z")

</div>

Hi! How are you? Seeing your design is great. I see that you use the app icon in the main bar and you have the search bar activated. I wanted to know if for Android the search button does not move or is it hidden?

I am using a code but in the Android view it generates that problem for me when I activate the search bar button.

If it works well for you, could you share the code with me?

@Lucas_Pires @Manu.n

---

<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: [July 2, 2021, 2:40pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/691 "2021-07-02T14:40:50Z")

</div>

> [@ThinhDinh](#):
>
> 🔍search box based on a text entry.

Had a use case for this today. Any chance we can figure out how to prevent return characters in the input or at least, if a user types a return character, it still displays inline (like a caption in an inline list)?

@Manu.n

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [July 2, 2021, 3:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/692 "2021-07-02T15:00:17Z")

</div>

Hello @Robert_Petitto  
What can I do for you ?

---

<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: [July 2, 2021, 3:01pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/693 "2021-07-02T15:01:54Z")

</div>

🙂

Is there a way using CSS to keep all input text on the same line even if a user types a return character? Targeting the text-input component.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [July 2, 2021, 3:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/694 "2021-07-02T15:11:58Z")

</div>

Yes  
I think about it.

[https://www.xul.fr/css/white-space.php](https://www.xul.fr/css/white-space.php)

white-space:nowrap;

But give me a few minutes to do a test. Unless you are (as usual ;-)) faster than me

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [July 2, 2021, 3:28pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/695 "2021-07-02T15:28:22Z")

</div>

In my experience, any code you use, when you click on the search bar - Android or iOS - disables any code you have in the screen

---

<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: [July 2, 2021, 3:46pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/696 "2021-07-02T15:46:14Z")

</div>

I tried the `nowrap` but it didn’t work.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [July 2, 2021, 3:47pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/697 "2021-07-02T15:47:13Z")

</div>

me neither.  
I am not very successful. But I continue my research

---

<div class="post-metadata">

### Author: ![Sharath\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sharath_s/32/28000_2.png) [@Sharath\_S](https://community.glideapps.com/u/Sharath_S)
#### Post date: [July 2, 2021, 5:37pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/698 "2021-07-02T17:37:20Z")

</div>

Is this finished? looks out of the world… damn

---

<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: [July 3, 2021, 12:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/699 "2021-07-03T00:21:48Z")

</div>

Seems like there’s some additional work under the hood to keep it on the same line, let’s say for the hint text’s header there is one but I can’t find it in the CSS. I think it’s a HTML conversion from a return character to a space.

---

<div class="post-metadata">

### Author: ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)
#### Post date: [July 3, 2021, 5:48am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/700 "2021-07-03T05:48:44Z")

</div>

I have found some time to do some testing and research, but I don’t have a solution for this problem. Sorry ☹

---

<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: [July 10, 2021, 12:04am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/701 "2021-07-10T00:04:47Z")

</div>

Releasing some of the Notion CSS me and @Lucas_Pires have been working on for the past few weeks.

Firstly we have this “floating” back and edit button, which goes in handy with screens where you have an image going straight to the top.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=9eb6f19b6fa14993b28b486a452c153b)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c728092989d3cc2322efea40e61196466fcb68e9.jpeg)

Displaying comments in a card view.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=28d14a60ce2b4a6ea64193302cf30cfd)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b80a2ded727c0f54da873c770d8e9e09d6443ef7.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: [July 10, 2021, 12:05am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/702 "2021-07-10T00:05:52Z")

</div>

Circles for choices: This one has been a thing I want to do for a really long time. It takes some columns to get there, and the setup is not very easy, but it does the job.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=f844917bac364480a6d7329c07207ac5)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/9/89db51e31992aa8bd256bea7baae6954713d47b8.jpeg)

Display quotes in card.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=843683f736224ebb8ba26ae9325d5c26)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e53ba5e93dd98b7b6682eb41175e9b30b9d7156b.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: [July 10, 2021, 12:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/703 "2021-07-10T00:06:40Z")

</div>

Padding for screens, a great-looking one from @Lucas_Pires.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=444fda9fd3d4492cb9dba570831db1ae)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

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

Border for entry fields, with support for text, phone and email, credits to @Robert_Petitto.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=18f13eed47cc4f3c8bf3784237787587)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

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

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [July 10, 2021, 12:25am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/704 "2021-07-10T00:25:29Z")

</div>

choices are not working correctly… once picked text disappear (probably becoming a background color) and is not displaying more than 4

---

<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: [July 10, 2021, 12:33am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/705 "2021-07-10T00:33:01Z")

</div>

In the link I specified in the second part how to avoid that.

For screenshots you see with 2 lines, it’s two choice components. There’s no way to render more than 5 in a row, that’s the component’s limitation.

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

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=f844917bac364480a6d7329c07207ac5)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [July 10, 2021, 12:34am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/706 "2021-07-10T00:34:06Z")

</div>

i did that… no effect

---

<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: [July 10, 2021, 12:35am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/707 "2021-07-10T00:35:00Z")

</div>

I’m pretty sure it works here for me and I have applied that to multiple screens so if you want me to debug that please share a copyable app.

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

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