【发布时间】：2020-10-26 08:25:55
【问题描述】：
当我单击下拉菜单时，它正在减小它的大小。如何避免它调整大小？ 下拉内容设置为绝对，因为我想避免它推送下面的内容。
<div class="row">
<div class="col-md-8">
<div class="row customer-heading-wrapper">
<div class="col-10 p-0 ">
<div class="input-group new_search" id="adv-search">
<input type="text" class="form-control form-control-sm rounded-4" placeholder="Search here.." [(ngModel)]="search"
(ngModelChange)="this.userQuestionUpdate.next($event)">
<div class="input-group-append">
<div class="input-group-append">
<button class="btn btn-danger rounded-0 " type="button" *ngIf="searchBox"
(click)="search='';clearSearch();">
<i class="fa fa-trash"></i>
</button>
</div>
<button class="btn btn-secondary rounded-right hand searc-opt search_new user_search"
type="button" pack="eva" (click)="clearMainSearch();searchToggle = !searchToggle">
<i class="fa fa-caret-down"></i>
</button>
</div>
<div class="advance-search" *ngIf="searchToggle">
<div class="col-md-12">
<form [formGroup]="vendorSearchForm" (ngSubmit)="searchBox=true;onSubmit()">
<div class="container-fluid dropdown-content mt-2">
<div class="card card-holder shadow-light p-0">
<div class="col-md-12">
<div class="row mt-2">
<div class="col-lg-2 col-md-12 ">
<label>Vendor Code</label>
</div>
<div class="col-lg-10 col-md-12 ">
<div class="form-group">
<input
class="form-control transparent-field rounded-0 border-top-0 border-left-0 border-right-0"
type="text" formControlName="vendorCode" placeholder=""
oninput="this.value = this.value.toUpperCase()"
[ngClass]="{ 'status-danger': submitted && f.vendorCode.errors }" />
</div>
</div>
<div class="col-lg-2 col-md-12 ">
<label>Vendor Name</label>
</div>
<div class="col-lg-10 col-md-12">
<div class="form-group">
<input
class="form-control transparent-field rounded-0 border-top-0 border-left-0 border-right-0"
type="text" formControlName="vendorName" placeholder=""
oninput="this.value = this.value.toUpperCase()"
[ngClass]="{ 'status-danger': submitted && f.vendorName.errors }" />
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-2 col-md-12">
<label>Approved</label>
</div>
<div class="col-lg-10 col-md-12">
<div class="form-group">
<select class="form-control form-control-sm rounded-0 border-top-0 border-left-0 border-right-0"
placeholder="Choose vendor approved or not" fullWidth
formControlName="approvedVendor"
[ngClass]="{ 'status-danger': submitted && f.approvedVendor.errors }">
<option *ngFor="let stat of statuslist" [value]="stat.id" class="drop-bg form-control ">
{{stat.name}}
</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-12 align-item">
<label>Currency</label>
</div>
<div class="col-lg-10 col-md-12">
<div class="form-group">
<ng-autocomplete [data]="currencylist" (selected)="changeSelection($event.name)"
[searchKeyword]="keywordCurrency" placeHolder="Enter Currency name"
[itemTemplate]="currencyTemplate" [notFoundTemplate]="notFoundTemplate"
[initialValue]="currencyName">
</ng-autocomplete>
<ng-template #currencyTemplate let-item>
<a [innerHTML]="item.name"></a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-12 align-item">
<label>Active</label>
</div>
<div class="col-lg-10 col-md-12">
<div class="form-group mt-3">
<input type="checkbox" formControlName="status"
[ngClass]="{ 'is-invalid': submitted && f.status.errors }" status="warning" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 text-right mb-2">
<button type="submit" class="btn btn-sm btn-primary mr-1 search_user_btn"
[disabled]="searchLoader">
<i class="fa fa-search"></i> Search</button>
<button type="button" class="mr-1 btn-sm btn btn-default cancel_btn_1 btn-danger"
(click)="searchToggle = !searchToggle"><i class="fa fa-close"></i>
Close</button>
<button type="button" class="btn btn-sm btn-default reset_user" (click)="clearSearch()">
<i class="fa fa-refresh"></i> Reset </button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-0">
<div class="btn-toolbar float-right ">
<button type="button" class="btn btn-default border border-right-0 btn-color btn-bg-color theme-btn-icon btn-sm " style="border-bottom-left-radius: 3px;border-top-left-radius: 3px;border-top-right-radius:0px;border-bottom-right-radius:0px;">
<a *ngIf="permissions.vendors_add" [routerLink]="['/vendor/add']"><i class="fa fa-plus text-danger"></i></a>
</button>
<button type="button" class="btn border btn-default btn-color btn-bg-color theme-btn-icon btn-sm" style="border-bottom-right-radius: 3px;border-top-right-radius: 3px;border-top-left-radius:0px;border-bottom-left-radius:0px;">
<a [routerLink]="['/vendor/list']" (click)="exportVendor()"><i class="fa fa-file-excel-o text-success"></i></a>
</button>
</div>
</div>
【问题讨论】：
标签： css bootstrap-4