Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dropdown displaying issue #247

Open
pankajvnale opened this issue Dec 28, 2023 · 3 comments
Open

Dropdown displaying issue #247

pankajvnale opened this issue Dec 28, 2023 · 3 comments

Comments

@pankajvnale
Copy link

  1. mentions are used on textarea that is placed on ngx-bootstrap popup then the dropdown is getting overlapped by popup so i am not able to see all the option. Is there is any configuration like container="body" like ngx tooltip it may help
@dmacfarlane
Copy link
Owner

Can you provide a StackBlitz example?

@vmandrychenko
Copy link

vmandrychenko commented Apr 16, 2024 •
edited
Loading

@dmacfarlane

We are facing the same issue and here is a stackblitz example where we reproduced it.

https://stackblitz.com/edit/5yhdn9?file=src%2Fexample%2Finput-overview-example.html

image

Another note to make that there should be consideration showing pop up to the left of @ when the tagging is close to the right boundary of the screen:

image

This seems to be related: #240

@bytrangle
Copy link

bytrangle commented May 31, 2024 •
edited
Loading

@vmandrychenko The mention menu's position is set to absolute. In the demo, it is a child of the <body> element so there is no issue.
However, in your project, the parent of mention menu is a <div> created from mat-form-field. Unfortunately, this

` has a position: relative and a fixed height, so you can only see as much as the parent height allows. You can change the height of the parent div, but it is not always feasible or desirable.

Overall, users of this component will run into this issue sooner or later. An alternative approach to displaying dropdown is to move it to an overlay that has nothing to do with the input field and takes up the whole viewport with fixed position.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@vmandrychenko @dmacfarlane @bytrangle @pankajvnale