javascript - 使引导下拉菜单显示在模式顶部的方法

Question

我正在尝试使用 Angular 创建一个引导模式，该模式具有来自 ngx-chips 模块的标签输入。标签输入具有自动完成功能，该功能将数据数组显示为下拉列表。

我面临的是 e 下拉菜单位于模态之后，而不是位于模态之上。所以显示的值是不可点击的。当我尝试使用检查元素向它添加 css 时，我无法添加它们，因为如果我单击浏览器屏幕上的其他任何位置，下拉菜单就会消失。

我需要能够在引导模式顶部显示下拉菜单。请让我知道是否有人可以帮助我使用css。

这是我的模态代码，并使用 angular boostrap 下拉，

<ng-template #contentone let-modal>
      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Select Skill</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <tag-input [(ngModel)]="searchText" name="srch-term" id="srch-term" placeholder="Search">
              <tag-input-dropdown [autocompleteItems]="listofdata"></tag-input-dropdown>
            </tag-input>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="open(content)">Search</button>
      </div>
    </ng-template>

这是呈现的模式和下拉菜单

Answer 1

您必须将属性[appendToBody]="false"添加到tag-input-dropdown。还要在css下面添加。

tag-input tag-input-dropdown /deep/ ng2-dropdown div.ng2-dropdown-menu {
    top: inherit !important;
    left: inherit !important;
}

您可以在这里找到更多信息。

https://github.com/Gbuomprisco/ngx-chips/issues/172#issuecomment-341026228