# Modal box with input text field

**URL:** <https://community.glideapps.com/t/modal-box-with-input-text-field/34613>\
**Category:** Ask for Help\
**Created:** [November 16, 2021, 4:46pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613 "2021-11-16T16:46:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 16, 2021, 4:46pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/1 "2021-11-16T16:46:09Z")

</div>

Hi @Lucas_Pires @ThinhDinh  
I loved this CSS trick for modal box but was wondering if its possible to get an RTL text input field in there?

```auto
/* Blurry */
<a style="top:180px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding:100vh;
background-color: rgb(0 0 0 / 70%); 
backdrop-filter: blur(4px);">
</style></div></a>

/* Box */
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;">
<br>

/* Text */
<h3><font color=#fff>Title</h3>
<div style="white-space: break-spaces;"><font color=#fff>Description
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: .4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">

<pre><span><style>

/* Button */
[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left:0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:38%;
max-width:180px;
z-index: 1;
}

.fab-target >* {
display:none;
}
</style></span></pre>

```

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 16, 2021, 6:54pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/2 "2021-11-16T18:54:17Z")

</div>

Actually I will be using this one because I need a button to cancel the input…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/300c4799f5d4d784c7e6a5e28e0391d7fb39edac.jpeg)

```auto
<!-- Blurry -->
<a style="top:200px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding: 100%;
background-color: rgb(0 0 0 / 70%); 
backdrop-filter: blur(4px);">
</style></div></a>

<!-- Box -->
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: white;
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#000>Notice</h3>
You've ran out of credits to send a new fax. Click to add more.

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left: calc(5% - 10px);
width: 40%;
max-width: 250px;
}

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

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

```

---

<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:** [November 16, 2021, 11:32pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/3 "2021-11-16T23:32:14Z")

</div>

I don’t have experience with RTL text. So let’s say with the “You’ve ran out of credits” part where my text is centered, how does RTL come into place? The “You’ve” part starts from the right?

---

<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:** [November 17, 2021, 1:39am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/4 "2021-11-17T01:39:04Z")

</div>

um, hasn’t anyone told you that we stopped using fax machines about 20 years ago? 😛 🤣

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 17, 2021, 6:12am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/5 "2021-11-17T06:12:03Z")

</div>

@ThinhDinh  
Doesn’t matter because the input field I need should be blank so Its just the curser that needs to be on the right.  
I can just add this myself.  
text-align: start;  
direction:rtl;

But It goes like this 🙂

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

My use case Is when I want the trainer to comment on a certain event of the trainee,  
Like his weight, a technique video, but still stay in that screen.

---

<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:** [November 17, 2021, 10:52am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/6 "2021-11-17T10:52:04Z")

</div>

What are you using as the input component for the trainer? A text entry?

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 17, 2021, 10:53am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/7 "2021-11-17T10:53:15Z")

</div>

yes this:  
data-test=“app-tf-text-input”

---

<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:** [November 17, 2021, 10:53am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/8 "2021-11-17T10:53:44Z")

</div>

Shouldn’t a component be presented on your screenshot above? I don’t see it.

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 17, 2021, 10:54am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/9 "2021-11-17T10:54:22Z")

</div>

I cant get it there because I don’t know how… That’s why I need you 🙂

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 17, 2021, 10:55am UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/10 "2021-11-17T10:55:34Z")

</div>

Here you go

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/0/e071f5dd58926792ff82e4e59f4195d5fe8e3230.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:** [November 17, 2021, 12:39pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/11 "2021-11-17T12:39:20Z")

</div>

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

Add a text entry and use the code below.

However, I haven’t found a way to have a calc formula that fits both mobile and desktop view.

```auto
<!-- Blurry -->
<a style="top:200px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding: 100%;
background-color: rgb(0 0 0 / 70%); 
backdrop-filter: blur(4px);">
</style></div></a>

<!-- Box -->
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: white;
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#000>Message</h3>

<pre><span><style>

[data-test="app-button-view"] { 
position: fixed;
top: 420px; 
margin-left: calc(5% - 10px);
width: 40%;
max-width: 250px;
}

[data-test="app-text-field"] { 
position: fixed;
top: 360px;
width: 100%;
margin-left: calc(5% - 10px);
max-width: 330px;
}

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

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

```

---

<div class="post-metadata">

**Author:** ![Lin\_Altshuler](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lin_altshuler/32/32591_2.png) [@Lin\_Altshuler](https://community.glideapps.com/u/Lin_Altshuler)\
**Post date:** [November 17, 2021, 12:49pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/12 "2021-11-17T12:49:06Z")

</div>

You are my hero 🦸‍♂️

---

<div class="post-metadata">

**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\
**Post date:** [November 17, 2021, 12:53pm UTC](https://community.glideapps.com/t/modal-box-with-input-text-field/34613/13 "2021-11-17T12:53:00Z")

</div>

Wow ThinhDinh you are Awesome 🤩 🤩