Suggest box out of view

[thethakuri]

I'm implement this directive in a form inside a bootsrap modal. When I open it in a browser, the suggest box is nowhere to be seen although tab and up&down keys seem to work. Upon close inspection, I found out that the suggestion box is rendered out of view with large top and left style properties :

As you can see above, the suggest box has the following style :

top : 852px
left : 583px

The box does appear as it should when I remove following lines from your __position_autocomplete()

function:

// container.style.top = rect.top + rect.height + scrollTop + 'px';
// container.style.left = rect.left + scrollLeft + 'px';

Is this a bug(maybe due to implementation within bootstrap modal that causes high top and left style values) or am I missing something ?

[hakib]

We have an issue with the AC container inside fixed positioned elements (such as the bootstrap modal).

Take a look at issue #13.

[thethakuri]

The css fix suggested by @PDSCoder

/* fix styles */
[mass-autocomplete] {
  position: relative;
}

.ac-container {
  position: absolute;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
}

It seem to work but there is extra width added to suggest box.

However my solution with just removing the container.style.top and container.style.left styles seem to work.

[hakib]

I'm glad the fix worked for you.

Try styling the form fields with padding instead of margin. Maybe it will help.