Not working properly if scrolled

[the-hotmann]

My HTML is like this:

<div id="test-autocomplete-textarea-container" class="col-sm-12">
	<label for="test-autocomplete-textarea" class="form-label user-select-none"><b>Inser Text</b></label>
	<textarea id="test-autocomplete-textarea" cols="27" rows="3" class="form-control textarea" required></textarea>
	<div class="invalid-feedback user-select-none">Text is needed.</div>
</div>

What did you expect to happen? The Popup should work as in the example

What happened instead? It popped up on the wrong spot. Also (in the DEMO) when the aspect-ration of the screen is not standard it does not work aswell.

Screenshots:

Seems its even depending on window-height which does not make sense as it should just orientate itself on the test-autocomplete-textarea element. Specially on the last screenshot you see (I always tipped in the same textarea) that it appends the searchresults very very very low. On mobile devices even out of the view.

[the-hotmann]

So I just figured out that this just happens when you HAVE scrolled!!! Just open the DEMO, then Zoom in untill the cotent expands so you can scroll a bit.

1. Scroll to the top. 1.1 Type something in to trigger the menu to come up (everything ok)
2. Scroll down a bit 2.1 Type something in to trigger the menu to come up (Pops up somewhere but not where it should)

[pburczyn]

@MartinHotmann did you find a solution, or mayby you use other js lib? I have te same problem, but with froala editor, when text is very long menu opens off the screen.

[the-hotmann]

@pburczyn sadly no, noone responded here and as I have not found a good replacement I then removed this feature.

[pburczyn]

@MartinHotmann i found solution (by chance), you have to set CCS property max-height on froala div tag or on any parent. In my case i have to set on body, max-height: 100vh;

[weiweijiuzhao]

@MartinHotmann i found solution (by chance), you have to set CCS property max-height on froala div tag or on any parent. In my case i have to set on body, max-height: 100vh;

hello, i cannot understand what is froala div tag or any parent node, now, i have same issue.

[weiweijiuzhao]