Autocomplete Suggestion Box Cover's Text Box on Mobile about anvil-extras

[Csirobi]

Hi,

I can reproduce this problem in the web browser (Firefox v112.02), too.

[s-cork]

@antletem Can I have a clone link of a minimal example?
I don't see this on the demo app I have locally in IOS, but it could also be a conflict in some css.
Could you add information about the browser/device you're using.

@Csirobi Is this all browsers or just firefox?
Again I don't see this, so it's difficult to fix.
Clone link and steps to reproduce would be helpful.

[antletem]

Of course!

Here is a live demo

Here is the clone

I was using my windows laptop on edge browser with the mobile mode enabled as well as safari/edge on my Iphone 13.

It is the same situation across all three scenarios. This is using the material design template.

[Csirobi]

Hi,

This the demo
Type the "a", and you can see the problem..

To Reproduce

1. Login to your account and create a new & empty app, such as: Blank app -> Custom HTML -> Blank Panel.
2. In the Design tab, drag&drop a Autocomplete component to the Form in the app.
3. In the Suggestions, initialize the component. (a, aa, aaa)
4. Try to run it, and type the "a" into the textbox..

Thx

[Csirobi]

Hi,

I have managed to find the problem: the core of it is the anvil banner at the top of the page for the free cloud users.
When this banner is visible, the whole app pulls down, however the position of the autocomplete popup window is not calculated correctly.
In the localhost, this problem can not be reproduced.

Thx

[s-cork]

@Csirobi thanks for the digging. There is a pr that fixes this issue. See the thread above where the PR is linked. When that's merged then you can see if the development branch fixes the issue.

[s-cork]

@Csirobi this is now merged so if you switch to the development branch of anvil-extras let us know if it's not fixed.

[Csirobi]

It works, thx.