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

<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 12, 2021, 9:02am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/729 "2021-07-12T09:02:22Z")

</div>

I add a line in the html

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/79988e329a1a94f62fddd51c9d4135a6390e603f.png)

EDIT ::  
I think that before each class eagle, birdie, … it must be wrapped with a tag

`<div class = "divTableCell"><div class="eagle..........> </div>`

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [July 12, 2021, 9:11am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/730 "2021-07-12T09:11:44Z")

</div>

oooh, yes! of course, that’s it! (so obvious, hahaha)  
Thank you!!!

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 12, 2021, 3:43pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/731 "2021-07-12T15:43:42Z")

</div>

Hey people, I’m facing a little issue here, I have an overlay with a message that has a scroll component. I’m trying to hide the button, and only show it once I’ve reached the bottom. Here’s a quick video to show you what I mean, thanks in advance

@Lucas_Pires @Robert_Petitto @ThinhDinh

---

<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:** [July 12, 2021, 3:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/732 "2021-07-12T15:55:18Z")

</div>

@PabloMFalero

In your CSS you need to find the code that is referring the button and change the position from “fixed” to maybe 70% or something.

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 12, 2021, 3:59pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/733 "2021-07-12T15:59:23Z")

</div>

Doesn’t work

---

<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:** [July 12, 2021, 4:12pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/734 "2021-07-12T16:12:39Z")

</div>

Do any of these work?

[https://www.w3schools.com/cssref/pr\_class\_position.asp](https://www.w3schools.com/cssref/pr_class_position.asp)

---

<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 12, 2021, 10:42pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/735 "2021-07-12T22:42:31Z")

</div>

Can you send us the CSS so we can test it ourselves? Thank you.

---

<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 13, 2021, 12:52am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/736 "2021-07-13T00:52:20Z")

</div>

If I’m not wrong, scroll action in CSS is based in animation keys, and the master on it is @hisashi.fujita

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [July 13, 2021, 1:24am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/737 "2021-07-13T01:24:23Z")

</div>

As @ThinhDinh points out, I think it’s difficult to provide an effective workaround without checking the CSS that is actually used.

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 13, 2021, 7:25am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/738 "2021-07-13T07:25:43Z")

</div>

This is the code I’m using:

```auto
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%; 
padding:100%;
background-color: white; 
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>

<div style =" position: fixed;
top: 150px; 
overflow-y: scroll;
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:500px;
background-color: #e5f8fb; 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<br>
<p style="black; font-size:15px;text-align: left;">@</p>

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 600px; 
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-58%, -50%);
width:38%;
}

.fab-target >* {
display:none;
}

</style></span></pre>

```

This is what makes the screen scroll: `overflow-y: scroll;`, but as you can see the position of the button is fixed, I’ve tried various ways to hide it until the “bottom is reached” but no luck

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [July 13, 2021, 9:41am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/739 "2021-07-13T09:41:11Z")

</div>

Please try this.  
Copy and paste the CSS below into rich text.  
Good luck to you.  
★Don’t forget to set the action for rich text.

```auto
<div class="box"></div>
<div class="text">
<div class="title">
Scroll by concatenating text and buttons.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
<div class="button_a">
button_a</div></div>
<pre><span><style>
.box,.text{
top: 8rem; 
}
.box{
position: fixed;
width: 90%;
height:400px; /*◀Outer box height*/
background-color: #e5f8fb; 
border-radius: 10px;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
}
.text{
position: fixed;
overflow-y: scroll;
width: 80%;
margin-left:5%;
height:360px; /*◀Inner text height*/
margin-top:5%;
font-size: 0.9rem;
line-height:1.2rem;
text-align: left;
}
.title{
font-size: 1.3rem;
line-height:1.5rem;
font-weight:bold;
margin-bottom:0.5rem;
}
.button_a {
margin-top: 1rem;
width: 60% ;
margin-left: 20%;
font-size: 1rem;
text-align: center;
border-radius: 0.7rem;
font-weight: bold;
background: #000; 
padding: 4% 2% 4% 4%;
color: #fff !important;
}

```

![スクリーンショット 2021-07-13 18.43.59](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/3/a31dccd933676f6569bb524b60e982f561c15e27.png)

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 13, 2021, 9:54am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/740 "2021-07-13T09:54:18Z")

</div>

Hi @hisashi.fujita , thank you for your efforts, however, here I lose the whole purpose of a button, I would need to have the action in the button and not in the whole richtext component…which it is the case. I’d need to add a button component in glide and hide it until I scroll to the bottom

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [July 14, 2021, 2:02am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/741 "2021-07-14T02:02:07Z")

</div>

I see. That’s too bad  
The current glide does not allow you to enclose text and standard button components in “div” etc.  
Therefore, I think it is difficult for now to fulfill your wishes.  
If javaScript becomes available in glide in the near future, your wishes may come true.

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 14, 2021, 7:34am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/742 "2021-07-14T07:34:35Z")

</div>

I hope this comes true!!😀

---

<div class="post-metadata">

**Author:** ![Blue\_Community](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blue_community/32/16616_2.png) [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)\
**Post date:** [July 16, 2021, 4:59pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/743 "2021-07-16T16:59:11Z")

</div>

Perhaps one of you can help me… I am trying to style a list relation button to stand out more inside a form…

 ![styling-inline-reference](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/a/fad507beaad7f904d4883a18d34dacde83d3a862.png)  
any ideas?

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [July 16, 2021, 5:34pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/744 "2021-07-16T17:34:58Z")

</div>

Try this:

```auto
<pre><span><style>
[data-test="list-item"] { 
background: #FF8000; 
}

```

---

<div class="post-metadata">

**Author:** ![Blue\_Community](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blue_community/32/16616_2.png) [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)\
**Post date:** [July 16, 2021, 5:49pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/745 "2021-07-16T17:49:03Z")

</div>

> [@kyleheney](#):
>
> ```auto
> <pre><span><style>
> [data-test="list-item"] { 
> background: #FF8000; 
> }
> 
> ```

thank you… that worked! much appreciated

---

<div class="post-metadata">

**Author:** ![Marc-Olivier](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@Marc-Olivier](https://community.glideapps.com/u/Marc-Olivier)\
**Post date:** [July 16, 2021, 6:25pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/746 "2021-07-16T18:25:13Z")

</div>

Thanks! THANKS! T H A N K S !!! MERCI 🙂

---

<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:** [July 17, 2021, 4:27am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/747 "2021-07-17T04:27:49Z")

</div>

Hola gente!!!

Does anyone have a code to achieve this?  
 ![Screen Shot 2021-07-16 at 11.23.30 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/e/dea04de8ff908b511f704c635ddf55669af01fe4.png)

There’s a code on the forum but it is not working.

@ThinhDinh @Manu.n @Lucas_Pires @Robert_Petitto

Thanks guys!

---

<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 17, 2021, 4:33am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/748 "2021-07-17T04:33:13Z")

</div>

Hi, what is the original code ??

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

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