[typeahead] with adaptivePosition

[woricek]

Bug description: typeahead with [adaptivePosition]="true" shows part of outside of left edge of the page, if some of the options are longer than input element. It gets aligned to right edge of input element.

Plunker/StackBlitz that reproduces the issue: https://stackblitz.com/edit/ngx-bootstrap-t2wtpd

Versions of ngx-bootstrap, Angular, and Bootstrap: ngx-bootstrap: 5.6.2. Angular: 8, Bootstrap: 4

Expected behavior

shoudl not have final "x" lower than 0

[mvarendorff]

Same issue with ngx-bootstrap: 5.6.1 Angular: 9.1.0 Bootstrap: 4.3.1

Would be great to have an option to set the position to something like leftAlways, rightAlways, auto.

[woricek]

Same issue with ngx-bootstrap: 5.6.1 Angular: 9.1.0 Bootstrap: 4.3.1

Would be great to have an option to set the position to something like leftAlways, rightAlways, auto.

I think it should just avoid negative left. leftAlways option could cut the value from the right side, while you still have some room on the left side of the screen.

[tranquocbaodev]

Same issue with ngx-bootstrap: ^12.0.0 Angular: 17.3.8 Bootstrap: 5.2.3

When displaying an empty space on the right, the console still reports an error.

<div class="content" style="width: 200px;">
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre>Lorem Ipsum dolor</pre>
  <pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
  <input
    [(ngModel)]="selected"
    [typeahead]="states"
    container="body"
    [adaptivePosition]="true"
    [optionsListTemplate]="customListTemplate"
    class="form-control"
  />
</div>

<ng-template #customListTemplate let-matches="matches" let-query="query" let-typeaheadTemplateMethods>
  <ul class="custom-list-group">
    <li
      class="custom-list-group-item"
      *ngFor="let match of matches"
      [class.active]="typeaheadTemplateMethods.isActive(match)"
      (click)="typeaheadTemplateMethods.selectMatch(match, $event)"
      (mouseenter)="typeaheadTemplateMethods.selectActive(match)"
    >
      {{ match.item }}
    </li>
  </ul>
</ng-template>