Wappler Version : 3.9.2
Operating System : Mac
Server Model: NodeJS
Database Type: MySql8
Hosting Type: AWS Docker
Expected behavior
What do you think should happen?
I'd like to be able to use the Auto Complete (AC) component in my set of filters. These filters are within a column that has overflow-y auto for scrolling within the column and a set height of 550px.
Actual behavior
If I create a brand new Auto Complete - it 'appears' to be working initially. Then if I add another, or if I edit the Auto Complete the drop-down list of results generated appear at the bottom of the container and so become either not user friendly, or unusable.
Please paste the html structure of the element this autocomplete is placed into so we can see how have you added it inside it and where exactly.
Also paste the CSS rules applied to this element you are referring to.
Hi @Teodor thank you for replying. It’s a big chunk of code (too much to copy/paste) so please see zipped HTML file of the specific section with the AC within (there are two).
The top level 'row' has no custom css applied to it.
The column within it has the following only:
overflow-y: auto;
height: 550px;
The only custom CSS applied to the actual autocomplete element is type="text" as a class to style the Wappler styled input like the rest of the form.
And yep, I have tested this without the type="text" css class - same concern.
From trying to debug this, if you load the form in-situ with no scroll, then the dropdown may be in the right position. If you scroll and then try to use the form input - that's when the issue arrises, so it must be to do with the scroll css.
No, just add the css rule i provided in your custom css file.
This class is already used by the cards component on the page, no need to add it anywhere on the page.
