Inside overflow: scroll container => suggestions not overlapping the container

[JaySunSyn]

How to use paper-autocomplete inside a scrollable container?

e.g. inside paper-dialog-scrollable the suggestions are not overlapping the dialog:

Thanks.

[ndormont]

@JaySunSyn , what's the issue?
Is it because the suggestions are not overlapping the dialog?
I have auto-complete paperchips in a dialogs, works just fine - but I see where you might have an issue if the filter input is too low, then the suggestion would be hidden/not shown, because they would be loaded inside the scrollable div.

[JaySunSyn]

@ndormont yes, the issue is that the suggestions are not overlapping the dialog.

A paper-dropdown-menu for example does overlap the the scrollable dialog:

paper-autocomplete in a scrollable dialog:

paper-autocomplete works just fine in a non-scrollable dialog:

[ndormont]

I had the same issue with a overflow: hidden div. I solved it by changing it to overflow: visible - but in your case, you have an issue because you want it to be scrollable. I wonder, does paper-dropdown-menu uses z-index for their suggestions!?

[JaySunSyn]

Yes, indeed, I need it to be scrollable.

paper-dropdown-menu uses iron-dropdown uses position: fixed and z-index

[JaySunSyn]

This would work I guess:

paper-autocomplete {
  --paper-autocomplete-suggestions-wrapper: {
    position: fixed;
    width: initial;
  }
}

[JaySunSyn]

Still think that position: fixed should be the default.

[jhuesos]

Introducing this change could be considered a breaking change, that's why in the past I preferred to don't change it. In the future, we could push a new breaking change version and this can be considered. Thanks for the comments by the way

…

On Fri, Dec 8, 2017, 11:44 Jalal Fathi ***@***.***> wrote: Still think that position: fixed should be the default. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#99 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAUumU6FpIM6xfj6p4-GghZv7PThk6RQks5s-RMJgaJpZM4Q0elz> .

[ainvaltin]

I guess this is kind of the same problem so I won't open new issue but comment here - even when the paper-autocomplete input is near the bottom edge of the browser the autocomplete list opens below it and is not completely visible (see the picture):

when navigating with keyboard the selection goes "out of view" and is thus pretty unusable.

The paper-dropdown-menu seems to manage always to figure out good height for the popup, so that it is always completely visible. Then again, it uses scrollbars in the popup even when there would be enough room to show all the items...

Vaadin ComboBox has a nice feature that when it is near the bottom edge of the browser it opens it popup list above the input, not below it.

So perhaps borrowing some ideas from these two would help to make a perfect popup list :)

[bstmedia]

This would work I guess:

paper-autocomplete {
  --paper-autocomplete-suggestions-wrapper: {
    position: fixed;
    width: initial;
  }
}

It worked for me. I would suggest to close this issue