Modal box with input text field

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?

/* 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>

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

<!-- 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>

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?

um, hasn’t anyone told you that we stopped using fax machines about 20 years ago? :stuck_out_tongue: :rofl:

@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 :slight_smile:

image.

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.

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

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

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

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

Here you go

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.

<!-- 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>
5 Likes

You are my hero :man_superhero:

3 Likes

Wow ThinhDinh you are Awesome :star_struck: :star_struck:

2 Likes