angular-mentions icon indicating copy to clipboard operation
angular-mentions copied to clipboard

Published 20 hours ago • verified publisher icon dmacfarlane

Dropdown displaying issue

Open pankajvnale opened this issue 1 year ago • 3 comments

  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

pankajvnale avatar Dec 28 '23 06:12 pankajvnale

Can you provide a StackBlitz example?

dmacfarlane avatar Jan 06 '24 19:01 dmacfarlane

@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

vmandrychenko avatar Apr 16 '24 14:04 vmandrychenko

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

bytrangle avatar May 31 '24 08:05 bytrangle