Auto Complete (AC) drop-down out of alignment when used within a container with overflow

Wappler General Bugs
#1

======== TEMPLATE BUG FORM ========

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.

See screenshot:

Screen Shot 2021-03-29 at 11.00.22 am
Screen Shot 2021-03-29 at 11.00.22 am439×529 16.9 KB

The box with Sales and wholesale should actually appear just under the current industry input.

#2

Hey @George sorry to bug you - any ideas what I can do myself to resolve this, as I expect it’s not a high priority bug for you guys!

#3

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.

#4

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).

exampleacerror.html.zip (4.7 KB)

#5

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.

#7

Scroll what exactly? The page? The div with the height set to 550?

1 Like
#8

Here’s a little video (please delete once viewed):
deleted

#9

Please set:

.card-body {
position: relative;
}

in your css and try again (after clearing your browser cache).

#10

Thanks @Teodor - To clarify - I add card-body as a class to the column and then add your css code to the custom style sheet I use, correct?

#11

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.

1 Like
#12

You my friend are a rockstar. Problem solved, thank you!!!

1 Like