search

dmacfarlane / angular-mentions

Angular mentions for text fields.
MIT License
196 stars 171 forks source link

Dropdown displaying issue #247

Open pankajvnale opened 11 months ago

pankajvnale commented 11 months ago
  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 commented 11 months ago

Can you provide a StackBlitz example?

vmandrychenko commented 7 months ago

@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: https://github.com/dmacfarlane/angular-mentions/issues/240

bytrangle commented 6 months ago

@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 frommat-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.