使 bootstrap 下拉菜单显示在模式顶部的方法
Ways to make bootstrap dropdown to show on top of a modal
我正在尝试使用 Angular 创建一个 bootstrap 模态,它有一个来自 ngx-chips 模块的标签输入。
标签输入有一个自动完成功能,它将数据数组显示为下拉列表。
我面临的是 e 下拉菜单位于模态框后面而不是模态框上方。所以显示的值是不可点击的。当我尝试使用检查元素向其添加 css 时,我无法添加它们,因为如果我单击浏览器屏幕上的其他任何地方,下拉菜单就会消失。
我需要能够在 bootstrap 模式顶部显示下拉菜单。如果有人可以帮助我 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">×</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>
这是呈现的模态和下拉菜单
您必须将属性 [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
我正在尝试使用 Angular 创建一个 bootstrap 模态,它有一个来自 ngx-chips 模块的标签输入。 标签输入有一个自动完成功能,它将数据数组显示为下拉列表。
我面临的是 e 下拉菜单位于模态框后面而不是模态框上方。所以显示的值是不可点击的。当我尝试使用检查元素向其添加 css 时,我无法添加它们,因为如果我单击浏览器屏幕上的其他任何地方,下拉菜单就会消失。
我需要能够在 bootstrap 模式顶部显示下拉菜单。如果有人可以帮助我 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">×</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>
这是呈现的模态和下拉菜单
您必须将属性 [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