# CSS MessageBox

**URL:** <https://community.glideapps.com/t/css-messagebox/26741>\
**Category:** Community Resources\
**Created:** [May 13, 2021, 10:08am UTC](https://community.glideapps.com/t/css-messagebox/26741 "2021-05-13T10:08:45Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![MIKAHEL](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikahel/32/25039_2.png) [@MIKAHEL](https://community.glideapps.com/u/MIKAHEL)\
**Post date:** [August 16, 2021, 6:48am UTC](https://community.glideapps.com/t/css-messagebox/26741/81 "2021-08-16T06:48:15Z")

</div>

Hi Jeff  
Any idea how to make this working perfectly from Tablet/Browser as well?  
it is quite annoying to see that from the mobile view looks pretty nice and in the tablet looks horrible 😩  
thanks if any help you can give me.

---

<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:** [August 16, 2021, 8:02am UTC](https://community.glideapps.com/t/css-messagebox/26741/82 "2021-08-16T08:02:38Z")

</div>

How does it look like on tablet for you?

---

<div class="post-metadata">

**Author:** ![MIKAHEL](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikahel/32/25039_2.png) [@MIKAHEL](https://community.glideapps.com/u/MIKAHEL)\
**Post date:** [August 16, 2021, 9:40am UTC](https://community.glideapps.com/t/css-messagebox/26741/83 "2021-08-16T09:40:50Z")

</div>

The problem is that loose the alignment  
This accordingly with the browser dimensions  
That’s surely my limitations about css knowledge, maybe there’s is a way to fix it in a center position.  
the 1st browser is firefox 🦊 the second is chromium  
in the pure Tablet layout is not much different

see the screenshot

 ![example](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/dadfe6ccc1c9573de0bbe059e97110f0df4f1434.jpeg) ![Screenshot from 2021-08-16 18-46-00](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7abe7592e8a72806a0c7f627d7439cd974e1315b.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:** [August 16, 2021, 9:59am UTC](https://community.glideapps.com/t/css-messagebox/26741/84 "2021-08-16T09:59:16Z")

</div>

Try this code to see if it works for you.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=c88ced8d13a14178aeb38ece651f3e7e)**
>
> 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:** ![MIKAHEL](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mikahel/32/25039_2.png) [@MIKAHEL](https://community.glideapps.com/u/MIKAHEL)\
**Post date:** [August 17, 2021, 4:58am UTC](https://community.glideapps.com/t/css-messagebox/26741/85 "2021-08-17T04:58:15Z")

</div>

![finally](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/b/4b7cf1ba96a3fa297031a357124c096a46efdbd7.jpeg)  
thank you so much!

and this is the applied code (if anyone may need it):

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

<!-- Box -->
<div style =" position: fixed;
top: 280px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:210px;
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>
<h2><font color=#000>メールを追加</h2>
Follow us!

<pre><span><style>

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

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

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

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

```

---

<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:** [September 27, 2021, 3:24pm UTC](https://community.glideapps.com/t/css-messagebox/26741/86 "2021-09-27T15:24:39Z")

</div>

Just tried this out for the first time, and loving it! 😍

 ![Screen Shot 2021-09-27 at 11.18.53 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/4/b4014ebd972d2db65f47a9c9a5accebdb8fe8f3f.png)

thank you @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:** [October 18, 2021, 6:24pm UTC](https://community.glideapps.com/t/css-messagebox/26741/87 "2021-10-18T18:24:02Z")

</div>

@Manu.n

I added a conditional action to the right button in the button bar and this happened:

 ![Screen Shot 2021-10-18 at 2.16.30 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ff3b970eac23d7bb6a51f37b70c2c31f2a535e42.png)

Any idea?

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 18, 2021, 7:17pm UTC](https://community.glideapps.com/t/css-messagebox/26741/88 "2021-10-18T19:17:03Z")

</div>

Your button went rogue or didn’t catch the flight-box? 😁 Sorry, fun reflex!  
Good luck with that, Robert.  
\<silently exiting🚪\>

---

<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:** [October 18, 2021, 11:20pm UTC](https://community.glideapps.com/t/css-messagebox/26741/89 "2021-10-18T23:20:27Z")

</div>

It’s somehow tied to the compose SMS action. Weeeeird.

---

<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:** [October 18, 2021, 11:51pm UTC](https://community.glideapps.com/t/css-messagebox/26741/90 "2021-10-18T23:51:54Z")

</div>

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

Add this to your code.

```auto
a[rel="noopener noreferrer"] {
position: fixed;
top: 420px; 
margin-left: calc(5% - 10px);
width: 40%;
max-width: 250px;
}

```

At the point of adding a SMS action, the button becomes … unattached to the bar as it now follows an a href setup, hence this addition.

---

<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:** [October 18, 2021, 11:52pm UTC](https://community.glideapps.com/t/css-messagebox/26741/91 "2021-10-18T23:52:29Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> a[rel="noopener noreferrer"] {
> position: fixed;
> top: 420px; 
> margin-left: calc(5% - 10px);
> width: 40%;
> max-width:
> 
> ```

I dunno how you found that…thanks!

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [November 2, 2021, 7:29pm UTC](https://community.glideapps.com/t/css-messagebox/26741/92 "2021-11-02T19:29:39Z")

</div>

How do you get the two button yes or no?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 2, 2021, 8:16pm UTC](https://community.glideapps.com/t/css-messagebox/26741/93 "2021-11-02T20:16:23Z")

</div>

I’m just using a button bar component, I believe.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [November 4, 2021, 6:58pm UTC](https://community.glideapps.com/t/css-messagebox/26741/94 "2021-11-04T18:58:26Z")

</div>

Tried that.

I connected the left to creating new row for my order.and right to the show profile screen.the right one worked correctly but the left got stuck even action were given.why?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [November 4, 2021, 7:11pm UTC](https://community.glideapps.com/t/css-messagebox/26741/95 "2021-11-04T19:11:57Z")

</div>

I don’t know why. I don’t know what you are trying to, what actions you are calling, or what you expect to happen, so I don’t know why it’s doing what is doing. You’re going to have to explain in more detail and explain what you mean by “stuck”. Include any screenshots if you can.

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [January 11, 2022, 7:29am UTC](https://community.glideapps.com/t/css-messagebox/26741/96 "2022-01-11T07:29:01Z")

</div>

Hello, this is on my builder

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

this is on dekstop (fullscreen)

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

This is on dekstop (not fullscreen) -

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

How to make it nicer on all conditions (phone, dekstop (fullscreen & non fullscreen) and tablet )?

---

<div class="post-metadata">

**Author:** ![Sales\_Manager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sales_manager/32/16172_2.png) [@Sales\_Manager](https://community.glideapps.com/u/Sales_Manager)\
**Post date:** [March 28, 2022, 1:31pm UTC](https://community.glideapps.com/t/css-messagebox/26741/98 "2022-03-28T13:31:54Z")

</div>

I want to add a field " number Entry" on popup

```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>Enter Amount</h3>
I want to add a field " number Entry" here

<pre><span><style>

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

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

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

```

 ![لقطة الشاشة 2022-03-28 162740](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5b4c5b8a3d050c48d16d71a4b0816e3a22db5c5d.png)

---

<div class="post-metadata">

**Author:** ![Valdir](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/valdir/32/37658_2.png) [@Valdir](https://community.glideapps.com/u/Valdir)\
**Post date:** [April 23, 2022, 9:06pm UTC](https://community.glideapps.com/t/css-messagebox/26741/99 "2022-04-23T21:06:26Z")

</div>

How do I adapt the code to make the gray background that ends up hiding the app’s screen transparent and work as a popup?

---

<div class="post-metadata">

**Author:** ![Valdir](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/valdir/32/37658_2.png) [@Valdir](https://community.glideapps.com/u/Valdir)\
**Post date:** [April 23, 2022, 9:58pm UTC](https://community.glideapps.com/t/css-messagebox/26741/100 "2022-04-23T21:58:41Z")

</div>

How can I put an image to background of modal/popup?

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [June 29, 2022, 2:29am UTC](https://community.glideapps.com/t/css-messagebox/26741/101 "2022-06-29T02:29:17Z")

</div>

I still cannot find the solution. hmm

Phone size :

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

Dekstop size :

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

And this is my coding :

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

<!-- Box -->
<div style =" position: fixed;
top: 280px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:210px;
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><br>
<h3><font color=#000>Notice</h3>
Are you sure to regenerate report ?

<pre><span><style>

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

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

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

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

```

[Previous page](https://community.glideapps.com/t/css-messagebox/26741.md?page=4)

[Next page](https://community.glideapps.com/t/css-messagebox/26741.md?page=6)