# Modal window

**URL:** https://community.glideapps.com/t/modal-window/22907
**Category:** Project Showcase
**Created:** [February 17, 2021, 4:35am UTC](https://community.glideapps.com/t/modal-window/22907 "2021-02-17T04:35:48Z")
**Posts on this page:** 8
**Page:** 2

<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: [May 20, 2021, 1:41am UTC](https://community.glideapps.com/t/modal-window/22907/21 "2021-05-20T01:41:32Z")

</div>

Fixed the animation tab.  
★ I used a normal button instead of a floating type.  
★ You can change the displayed characters with the Title of each button.  
★ You can change the width, color, position, etc. of the button.  
★ Floating type is backed up in MENU.

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 20, 2021, 5:28am UTC](https://community.glideapps.com/t/modal-window/22907/22 "2021-05-20T05:28:52Z")

</div>

thank you

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 20, 2021, 7:04am UTC](https://community.glideapps.com/t/modal-window/22907/23 "2021-05-20T07:04:29Z")

</div>

Hi @hisashi.fujita , I am trying to make my info button as a floating button, but the css in your new modal app doesnt seem to effect it. not sure what i am doing wrong :frowning ☹

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

---

<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: [May 21, 2021, 3:57am UTC](https://community.glideapps.com/t/modal-window/22907/24 "2021-05-21T03:57:03Z")

</div>

Amal, I’m not sure what CSS you’re using right now. But your confusion right now may be due to the following description of the CSS I’m presenting.  
Let’s explain with the CSS of the uploaded image.

> div [id \* =‘screenScrollView’]\> div\> div: nth-of-type (1) [data-test = “app-button-view”] {  
> bottom: 24%;  
> }

★ The number of type (1) in the code indicates the order of the components used on the left side from the top.  
type (1) → 1st top ・ type (2) → 2nd from top ・ type (3) → 3rd from top  
It is specified as.

Please try this.

 ![スクリーンショット 2021-05-21 12.40.07](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/ef2d2ea4b9d0977aca5942df0630dcd71a51c5c2.png)

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 21, 2021, 8:14am UTC](https://community.glideapps.com/t/modal-window/22907/25 "2021-05-21T08:14:50Z")

</div>

thank you so much @hisashi.fujita this is very clear to me now and working great

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [May 21, 2021, 1:15pm UTC](https://community.glideapps.com/t/modal-window/22907/26 "2021-05-21T13:15:26Z")

</div>

any way to split the button bar into individual buttons?  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/3/9321f3cd035ec246d3c1f9c84a3488b2e0ce0c3c.png)

---

<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: [May 22, 2021, 1:21am UTC](https://community.glideapps.com/t/modal-window/22907/27 "2021-05-22T01:21:03Z")

</div>

What kind of finished product are you aiming for?  
Please tell us a little more detail.

---

<div class="post-metadata">

### Author: ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)
#### Post date: [June 11, 2021, 1:09pm UTC](https://community.glideapps.com/t/modal-window/22907/28 "2021-06-11T13:09:53Z")

</div>

You can create 2 bar buttons and configure each one with a blank background & text on the left & right

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

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

[Previous page](https://community.glideapps.com/t/modal-window/22907.md?page=1)