I am still looking for a solution… I am unable to select any of the menu options, and the payment does not post correctly as a result. Xojo version 2022r4.1, web. Linux Mint 20.2 Happens in Firefox and Chrome.
If I run the app in 2022r1 it works fine… but I get a message that some controls are not supported in the older version??
I have attached a screenshot showing my issue:
Did you change the z-index?
The screenshot is debugging your app in Linux Mint 20.2 or is running on a Linux server somewhere and you see that with Linux Mint 20.2 as client? Using Windows/Mac as clients, do you see the problem?
Do you have sample code? Does it work using Windows/Mac and not Linux?
The screen shot is my app running on a linux mint server, with the browser on a second machine. I don’t have Mac clients… will try the windows client…
Where do I set the z index? I did a search on the help screen and that did not show…
You should not change the z index, that’s the problem we had before (the z index of the dialog was higher than the WebPopup index).
If you want to send me a demo access I can test on a Mac (send me a direct message).
I haven’t seen this problem with Ubuntu server. I don’t have Mint server or client.
Url: https://portman.no-ip.biz:9000
Temp user name: Tester
Temp PW: testit
I have put one invoice in the system, invoice #1
In the menu on the left, click on ‘receive payments’ It will open a window to enter payment info. You can enter whatever, this is just a dummy account and company.
Did you change your App HTMLHeader style for modal so z-index is 1055? Here is the code on your page:
because the WebPopup uses 1050 it is shown ‘behind’ the dialog, here is the code:
it looks like your .modal-backdrop is also using z-index 1050, weird. Sorry don’t have more time right now, let me know if you did change the z-index.
I did not change z-index; I don’t know how to change the z-index. Should I go in and change it? If so, where is the setting located?
It looks like you are not using Xojo’s bootstrap theme.
And your theme is bootstrap version 5.1.3
See if the Theme that you are using is available as Bootstrap v4 here: Bootswatch: Free themes for Bootstrap
Try that and if that doesn’t fix your problem let me know.
Edit: just to be clear to others, the WebDialog (modal) z-index in Xojo is 1050, this bootstrap theme has the z-index as 1055 breaking the WebPopupMenus in a dialog.
Ok… I deleted my bootstrap, downloaded a version 4, put in the navigator. When I run from the IDE, it works fine, when I compile and put in my server, it does not work correctly.
I will go back to the default bootstrap? I tried that by just deleting the bootstrap file in the navigator, running it, saving, then compiling but that did not work either.
Maybe your server and/or browser is using a cached version of the bootstrap, try to clean the caches.
I did clean my browser cache before posting… I also cleared the caches on my server… I did not observer any change. The menu is still behind the rest of the screen.
I’m sorry to hear that, did you update the server above (portman.no-ip)?
I was able to ‘break’ Xojo default theme to match your problem:
This is the code that I added to App HTMLHeader:
<style>
.modal {z-index: 1055;}
.modal-backdrop {z-index: 1050;}
</style>
the z-index used by Xojo are 1050 for modal and 1040 for modal-backdrop, changing the values to those
<style>
.modal {z-index: 1050;}
.modal-backdrop {z-index: 1040;}
</style>
may fix your problem (I say may because is weird that debugging is different than your deployed app), and look like this:
can you search for “zindex” or “z-index” in your xojo code ?
Can you let me know which Bootstrap 4 Theme are you using? I can take a look and see if they changed the z-index there.
I ended up using spacelab, as it seemed the cleanest. I am not opposed to the default theme, if I can get it back and it would work.
Spacelab v4 z-index is 1050 for .modal
and 1040 for .modal-backrop
so now your problem is not the theme but it is not updating your server with the correct version.
I put the code in that you showed in the app htmlheader and now it is working properly again… not sure the actual theme I selected is showing, but I am not really concerned on that part.
Thank you for your assistance.
I will try rebooting the server tonight and see if that clears out the issue…
Well, it has been awhile, but the issue is back… only in versions 2023r2 and 2023r3. Prior to that, it works fine with
<style>
.modal {z-index: 1050;}
.modal-backdrop {z-index: 1040;}
</style>
in the code from Alberto…
2023r2 and r3 now use Bootstrap 5.
Is the theme that you are using available for Bootstrap 5?