DatePicker in form in alert()

Anvil Q&A
1

I created a form with a DatePicker and used it inside an alert:

result = alert(FormWithDatePicker(), buttons=['OK', 'Cancel'])

When I click on the DatePicker the popup appears under the alert itself:
image

Is it possible to get it to appear above instead of under?

1 Like
2

In a new material design app this doesn’t happen
https://anvil.works/build#clone:3XSNMQW4VXD72ZOH=3W7H4KWJ3XKYBYYBDHMUJJCM

Do you have a clone link that reproduces the problem?
(It might also be some additional styling that has been added to your app causing the problem)

1 Like
3

Stu, you are right, it’s a problem with our own customization.

When we create a new app we replace its theme folder with the folder from our “Standard Theme” app. The template app has been created years ago, and it may have been created starting from a buggy theme, or we may have introduced some bugs, or it may have been working well with older Anvil apps, but it is not compatible with the new ones. This is always in my mind when I replace the folders: am I braking something that is working?

Oh well… I will try to figure out what’s wrong. Eventually.

With default Material Design:

https://anvil.works/build#clone:OBH2UUEZTNAFSB5A=OYLLJRTCPCWY6LK6ZDZ727OC

After cloning, replacing the theme folder with the company’s theme folder and pushing:

https://anvil.works/build#clone:FDR4HBQBRP52NNDL=MEUZCC2HS6C5BOWWR4ZJ4KNC

4

You’ve got some z-indexes issues going on.
If you do a search for z-index in theme.css you’ll find the following values.
9997, 9998, 9999

The alert modal defaults to 1050 and the datepicker defaults to 3001.
In adjusting the theme the alert modal z-index got changed to 9998.
So you could try replacing the following values
9997 -> 1049
9999 -> 1051
and remove the change to the alert-modal z-index.

Or you could increase the datepicker z-index if that doesn’t work in the context of your styling

2 Likes
5

The Standard Theme app was created and maintained by a colleague that left the company. After some digging in the git repository I found out that the #alert-modal {z-index: 9998;} was introduced in the commit “Add dim overlay HTML, JS, and CSS to allow interface locking”.

If I remember the interface locking is a set of functions that prevent the user from clicking anywhere by showing a semi-transparent div on top of the whole page.

So, before fixing the z-index in the Standard Theme app I will need to make sure I don’t break that interface locking (I don’t even remember which apps are using it).

In the mean time I can fix the app I’m working on, which doesn’t use that old interface locking.

Thanks

1 Like