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

<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:** [May 30, 2021, 2:43am UTC](https://community.glideapps.com/t/css-messagebox/26741/61 "2021-05-30T02:43:42Z")

</div>

So it’s flashing when it shouldn’t?  
Does the opposite condition work okay? (ie. if it’s supposed to be there, does it appear and stick?)

---

<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:** [May 30, 2021, 2:43am UTC](https://community.glideapps.com/t/css-messagebox/26741/62 "2021-05-30T02:43:45Z")

</div>

> **[Units 2.0 · Leaderboard](https://www.loom.com/share/cc0a115f63a24e85bc09fe996b5024f6)**

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 30, 2021, 2:45am UTC](https://community.glideapps.com/t/css-messagebox/26741/63 "2021-05-30T02:45:13Z")

</div>

flip if then 0 first

---

<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:** [May 30, 2021, 3:00am UTC](https://community.glideapps.com/t/css-messagebox/26741/64 "2021-05-30T03:00:30Z")

</div>

? Can’t do that. There is no “if not within today”. I need to account for a date before today or if there’s no date (new user…never claimed).

---

<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:** [May 30, 2021, 3:48am UTC](https://community.glideapps.com/t/css-messagebox/26741/65 "2021-05-30T03:48:33Z")

</div>

So something like this doesn’t work?:

If Date is empty  
Then 1 or true  
ElseIf date is before Today  
Then 1 or true  
Else  
\*blank or \*zero

Thinking that the key is to make the true condition blank, thus the visibility is set to display when not blank. So for that split second when it’s loading, the default value will be blank (or maybe zero) before it is computed and set to true or blank through the condition checks. Hopefully the default would be blank for that short moment, which would still match the condition, which can only be true when the conditions are met to set it to Not blank.

I think your last IFE may not have worked because for a split second, the date may not have been filled yet, so the condition feels to the ELSE and sat to 1.

Hopefully that kind of makes sense. Just make sure that whatever you think it may be calculating to…in that split second…that you make sure that the value figured out in that split second is not a true condition to make the component show.

---

<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:** [May 30, 2021, 3:56am UTC](https://community.glideapps.com/t/css-messagebox/26741/66 "2021-05-30T03:56:59Z")

</div>

Ya it hides as intended when there’s only a condition of “date before today”, but the moment I throw a “OR if empty”, it has the glitch:

> **[Units 2.0 · Glide](https://www.loom.com/share/665ee15631c74516b5b59593dcdc4ebb)**

---

<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:** [May 30, 2021, 4:32am UTC](https://community.glideapps.com/t/css-messagebox/26741/67 "2021-05-30T04:32:49Z")

</div>

So even with an IFE structure in the table, then a visibility condition to only show when the IFE column is not empty it still doesn’t work? I think that OR visibility condition is still biting you because the value is momentarily empty until it’s loaded.

Also, that first record that flashes for a second…is that maybe triggering the popup condition before the correct filtered record is displayed??? Resolving that issue may cause the popup to work correctly.

Sorry, I’m not really around a computer very much this weekend to try it myself.

---

<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:** [June 19, 2021, 7:37pm UTC](https://community.glideapps.com/t/css-messagebox/26741/68 "2021-06-19T19:37:03Z")

</div>

@Robert_Petitto are you facing that glitch when you open the app and the modal keeps showing for a sec and disappears yet? I’m facing now 😟

---

<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:** [June 19, 2021, 7:50pm UTC](https://community.glideapps.com/t/css-messagebox/26741/69 "2021-06-19T19:50:19Z")

</div>

Ya.

---

<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:** [June 22, 2021, 4:19pm UTC](https://community.glideapps.com/t/css-messagebox/26741/70 "2021-06-22T16:19:02Z")

</div>

> [@Manu.n](#):
>
> ```auto
> <div style =" position: fixed;
> top: 300px; 
> width: 94%;
> max-width:680px;
> opacity: 1;
> margin-left: -5px;
> height:180px;
> background-color: rgb(150 150 150 / 20%); 
> 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>
> <h3><font color=#000>Is everything correct</h3>
> <h1>{amount}</h1>
> 
> <a style="position: absolute; 
> width:110%; 
> top: -300px; 
> right: 0%; 
> left:-5%;
> z-index:-1; 
> opacity: 0;">
> <div style="background-color:#aaaaaa; margin: 0%; padding:100%;z-index:-2;">
> 
> <pre><span><style>
> 
> [data-test="app-button-view"] { 
> position: fixed;
> top: 420px; 
> margin-left:7%;
> width:30%;
> max-width:180px;
> }
> 
> .fab-target >* {
> display:none;
> }
> 
> </style></span></pre>
> 
> ```

how do i get the amount field to populate?

---

<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:** [June 22, 2021, 4:34pm UTC](https://community.glideapps.com/t/css-messagebox/26741/71 "2021-06-22T16:34:58Z")

</div>

All of that is placed into a template column and I just do a replacement on {amount}

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a70b2384528fd818b7904ea3048c9421d13f6024.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:** [June 22, 2021, 4:36pm UTC](https://community.glideapps.com/t/css-messagebox/26741/72 "2021-06-22T16:36:33Z")

</div>

thanks

---

<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 20, 2021, 10:11am UTC](https://community.glideapps.com/t/css-messagebox/26741/73 "2021-07-20T10:11:42Z")

</div>

Hi my friend, is this still working for button bars?

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

I’m trying this and it’s stacking on top of each other.

---

<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 20, 2021, 10:15am UTC](https://community.glideapps.com/t/css-messagebox/26741/74 "2021-07-20T10:15:39Z")

</div>

Hi @ThinhDinh  
Yes I instantly checked on the demo app and it works !!!

---

<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 20, 2021, 10:16am UTC](https://community.glideapps.com/t/css-messagebox/26741/75 "2021-07-20T10:16:04Z")

</div>

What is your CSS?

---

<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 20, 2021, 11:46am UTC](https://community.glideapps.com/t/css-messagebox/26741/76 "2021-07-20T11:46:15Z")

</div>

Here’s what I currently use.

```auto
<!-- Blurry -->
<a style="top:180px;">
<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: grey;
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>
In order to add more files to your account, you must select a paid plan option.

<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;
}

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

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

```

---

<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 20, 2021, 11:50am UTC](https://community.glideapps.com/t/css-messagebox/26741/77 "2021-07-20T11:50:34Z")

</div>

Test with this version

```auto

[data-test="app-button-view"] { 
position: fixed;
top: 270px; 
margin-left:7%;
width:30%;
max-width:180px;
}

```

---

<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 20, 2021, 11:51am UTC](https://community.glideapps.com/t/css-messagebox/26741/78 "2021-07-20T11:51:41Z")

</div>

The CSS you use is for one button!

---

<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 20, 2021, 11:51am UTC](https://community.glideapps.com/t/css-messagebox/26741/79 "2021-07-20T11:51:55Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/a/ba20710808904f4a9561a83243789434e4655ef1.jpeg)

It works with 420px. Thank you 😉

---

<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 20, 2021, 11:54am UTC](https://community.glideapps.com/t/css-messagebox/26741/80 "2021-07-20T11:54:06Z")

</div>

Yes it is necessary to adjust the value of the top.  
In my version, I reassembled the box for the phone version otherwise on some phone the display is curious!

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

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